Markdownビューア＆エディタ

リアルタイム編集、KaTeX数式、Mermaidダイアグラム、GFM対応の多機能Markdownビューアです。

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ビューア＆エディタの使い方

ファイルをサーバーへ送信せず、安全に処理できます。

💡 使い方（ステップ別）

処理するファイルを選択します。
利用できるオプションを確認・調整します。
処理を開始し、このタブを開いたままにします。
結果を確認して端末にダウンロードします。

🔒 主な機能とブラウザ処理の仕組み

プライバシー重視の設計

ファイルはブラウザのメモリ内に留まり、サーバーへ送信されません。

ブラウザ内処理

最新のブラウザAPIを使い、端末上で高速かつ安全に処理します。

❓ よくある質問 (FAQ)

Q. ファイルはサーバーへ送信されますか？

A. いいえ。すべての処理はブラウザ内で行われます。

Q. 元のファイルは変更されますか？

A. いいえ。元ファイルはそのままで、結果は新しいファイルとして保存されます。