Markdown-Viewer & Editor

Markdown anzeigen und bearbeiten mit Live-Vorschau, KaTeX-Formeln, Mermaid-Diagrammen und 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)

Markdown-Viewer & Editor verwenden

Erledigen Sie die Aufgabe sicher, ohne Dateien auf einen Server hochzuladen.

💡 Anleitung (Schritt für Schritt)

Wählen Sie die zu verarbeitenden Dateien aus.
Prüfen und ändern Sie die verfügbaren Optionen.
Starten Sie die Verarbeitung und lassen Sie diesen Tab geöffnet.
Prüfen Sie das Ergebnis und laden Sie es herunter.

🔒 Hauptmerkmale und Browserverarbeitung

Datenschutz von Anfang an

Ihre Dateien bleiben im Browserspeicher und werden nie auf unsere Server hochgeladen.

Verarbeitung im Browser

Die Verarbeitung erfolgt lokal mit modernen Browser-APIs.

❓ Häufig gestellte Fragen (FAQ)

Q. Werden meine Dateien auf einen Server hochgeladen?

A. Nein. Alle Dateien werden lokal in Ihrem Browser verarbeitet.

Q. Wird die Originaldatei verändert?

A. Nein. Das Original bleibt unverändert; das Ergebnis wird als neue Datei gespeichert.