मार्कडाउन व्यूअर और एडिटर

लाइव पूर्वावलोकन, KaTeX गणित सूत्र, Mermaid आरेख और GFM समर्थन के साथ मार्कडाउन पढ़ें और संपादित करें।

Markdown Source Editor137 lines • 586 words • 3088 chars

---
title: "차세대 마크다운 뷰어 & 에디터 가이드"
author: "WebTools"
date: "2026-09-01"
category: "Document Utility"
version: "2.0.0"
---

# 🚀 차세대 마크다운 뷰어 & 에디터

이 도구는 **100% 브라우저 메모리**에서 동작하며, LaTeX 수식, Mermaid 다이어그램, GFM 표, Diff 코드 강조, GitHub 알림, 이모지 단축코드 등을 즉시 렌더링합니다.

---

## 💡 지원 기능 요약

- [x] **실시간 양방향 편집 & 미리보기** (View / Edit / Split 모드 지원)
- [x] **클립보드 이미지 붙여넣기 (Ctrl + V)**: 이미지를 복사하여 붙여넣으면 Base64 자동 삽입!
- [x] **프레젠테이션 슬라이드 쇼 모드**: `---` 구분자 기준 즉석 PPT 발표 가능
- [x] **LaTeX 수식 (KaTeX)**: 인라인 및 대형 블록 수식 지원
- [x] **Mermaid 다이어그램**: 플로우차트, 시퀀스, 간트 차트 실시간 렌더링
- [x] **이모지 숏코드 변환**: :rocket: :fire: :sparkles: :tada: :star: :100:
- [x] **Diff 코드 블록 하이라이팅**: 코드 변경 내역 시각화
- [x] **GFM 표 자동 정렬 & HTML 역변환 지원**

---

## 📊 1. Mermaid 다이어그램 지원

마크다운 코드 블록에 ```mermaid 를 입력하면 다양한 다이어그램이 자동 렌더링됩니다.

```mermaid
graph TD
    A[📄 마크다운 텍스트 입력] --> B{파서 변환}
    B -->|수식 감지| C[📐 KaTeX 수식 렌더러]
    B -->|다이어그램 감지| D[📊 Mermaid SVG 렌더러]
    B -->|코드 감지| E[🎨 Highlight.js 구문 강조]
    C --> F[✨ 완성된 고화질 문서 출력]
    D --> F
    E --> F
```

### 📅 시퀀스 다이어그램 예시

```mermaid
sequenceDiagram
    autonumber
    actor User as 👤 사용자
    participant App as 💻 브라우저 (WebTools)
    participant Engine as ⚙️ 마크다운 엔진

User->>App: 파일 드롭 또는 텍스트 입력
    App->>Engine: 실시간 파싱 및 렌더링 요청
    Engine-->>App: KaTeX + Mermaid + GFM HTML 생성
    App-->>User: 즉각적인 고품질 미리보기 표시
```

---

## 📐 2. LaTeX 수식 (KaTeX 지원)

### 인라인 수식
유명한 아인슈타인의 질량-에너지 등가 공식은 $E = mc^2$ 이며, 오일러 공식은 $e^{ipi} + 1 = 0$ 입니다.

### 블록 수식
가우스 적분과 정규분포 확률밀도함수:

$$
int_{-infty}^{infty} e^{-x^2} , dx = sqrt{pi}
$$

$$
f(x) = rac{1}{sigma sqrt{2pi}} e^{-rac{1}{2}left(rac{x-mu}{sigma}
ight)^2}
$$

---

## 🔔 3. GitHub 스타일 알림 (Alerts / Callouts)

> [!NOTE]
> 파일은 외부 서버로 전송되지 않으며 모든 연산은 사용자 브라우저에서 안전하게 수행됩니다.

> [!TIP]
> 클립보드에 복사한 이미지를 에디터에 `Ctrl + V`로 붙여넣으면 Base64 이미지로 자동 변환되어 문서에 내장됩니다.

> [!IMPORTANT]
> 상단 툴바의 **'Slide'** 버튼을 누르면 이 문서를 즉시 전체 화면 프레젠테이션 슬라이드로 발표할 수 있습니다.

> [!WARNING]
> 브라우저 탭을 새로고침하기 전에 중요한 작성 내용은 **다운로드(.md)** 버튼으로 보관하세요.

---

## 💻 4. 코드 구문 강조 및 Diff 블록

```diff
--- a/src/parser.ts
+++ b/src/parser.ts
@@ -1,5 +1,6 @@
- const version = "1.0.0";
+ const version = "2.0.0";
+ const enableMermaid = true;
  function initialize() {
-   console.log("Old init");
+   console.log("Next-Gen Markdown Initialized!");
  }
```

```typescript
// TypeScript 예제
export function generateReport(title: string): { status: string } {
  console.log(`Generating report: ${title}`);
  return { status: "success" };
}
```

---

## 📋 5. GFM 표 (Table)

---

## 🏷️ 6. 단축키 및 서식 태그

- 단축키 표시: <kbd>Ctrl</kbd> + <kbd>B</kbd>, <kbd>Ctrl</kbd> + <kbd>I</kbd>, <kbd>Ctrl</kbd> + <kbd>V</kbd>
- 텍스트 강조: 형광펜 하이라이트
- 아래첨자 및 위첨자: H2O, 106
- 이모지 숏코드: :tada: :fire: :rocket: :heart: :check:

Live Rendered Preview~3 min read

📋Document Metadata

title차세대 마크다운 뷰어 & 에디터 가이드

authorWebTools

date2026-09-01

categoryDocument Utility

version2.0.0

# 🚀 차세대 마크다운 뷰어 & 에디터

# 💡 지원 기능 요약

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

# 📊 1. Mermaid 다이어그램 지원

마크다운 코드 블록에 ```mermaid 를 입력하면 다양한 다이어그램이 자동 렌더링됩니다.

Rendering Mermaid diagram...

# 📅 시퀀스 다이어그램 예시

Rendering Mermaid diagram...

# 📐 2. LaTeX 수식 (KaTeX 지원)

# 인라인 수식

유명한 아인슈타인의 질량-에너지 등가 공식은 $E = mc^2$ 이며, 오일러 공식은 $e^{ipi} + 1 = 0$ 입니다.

# 블록 수식

가우스 적분과 정규분포 확률밀도함수:

int_{-infty}^{infty} e^{-x^2} , dx = sqrt{pi}

f(x) = rac{1}{sigma sqrt{2pi}} e^{- rac{1}{2}left( rac{x-mu}{sigma} ight)^2}

# 🔔 3. GitHub 스타일 알림 (Alerts / Callouts)

[!NOTE] 파일은 외부 서버로 전송되지 않으며 모든 연산은 사용자 브라우저에서 안전하게 수행됩니다.

[!TIP] 클립보드에 복사한 이미지를 에디터에 `Ctrl + V`로 붙여넣으면 Base64 이미지로 자동 변환되어 문서에 내장됩니다.

[!IMPORTANT] 상단 툴바의 **'Slide'** 버튼을 누르면 이 문서를 즉시 전체 화면 프레젠테이션 슬라이드로 발표할 수 있습니다.

[!WARNING] 브라우저 탭을 새로고침하기 전에 중요한 작성 내용은 **다운로드(.md)** 버튼으로 보관하세요.

# 💻 4. 코드 구문 강조 및 Diff 블록

diff

--- a/src/parser.ts+++ b/src/parser.ts@@ -1,5 +1,6 @@- const version = "1.0.0";+ const version = "2.0.0";+ const enableMermaid = true;  function initialize() {-   console.log("Old init");+   console.log("Next-Gen Markdown Initialized!");  }

typescript

// TypeScript 예제
export function generateReport(title: string): { status: string } {
  console.log(`Generating report: ${title}`);
  return { status: "success" };
}

# 📋 5. GFM 표 (Table)

[object Object],[object Object],[object Object],[object Object][object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

# 🏷️ 6. 단축키 및 서식 태그

[object Object],[object Object],[object Object],[object Object]

문서 목차 (Outline)

मार्कडाउन व्यूअर और एडिटर का उपयोग कैसे करें

फ़ाइलें सर्वर पर अपलोड किए बिना सुरक्षित रूप से काम पूरा करें।

💡 उपयोग कैसे करें (चरण दर चरण)

संसाधित की जाने वाली फ़ाइलें चुनें।
उपलब्ध विकल्पों की जाँच करके उन्हें समायोजित करें।
प्रसंस्करण शुरू करें और यह टैब खुला रखें।
परिणाम देखें और उसे अपने डिवाइस पर डाउनलोड करें।

🔒 मुख्य विशेषताएं और ब्राउज़र प्रोसेसिंग

गोपनीयता-केंद्रित डिज़ाइन

फ़ाइलें ब्राउज़र मेमोरी में रहती हैं और हमारे सर्वर पर कभी अपलोड नहीं होतीं।

ब्राउज़र में प्रसंस्करण

आधुनिक ब्राउज़र API की मदद से काम आपके डिवाइस पर ही होता है।

❓ अक्सर पूछे जाने वाले प्रश्न (FAQ)

Q. क्या मेरी फ़ाइलें सर्वर पर अपलोड होती हैं?

A. नहीं। सभी फ़ाइलें आपके ब्राउज़र में स्थानीय रूप से संसाधित होती हैं।

Q. क्या मूल फ़ाइल बदली जाती है?

A. नहीं। मूल फ़ाइल सुरक्षित रहती है और परिणाम नई फ़ाइल के रूप में डाउनलोड होता है।