마크다운 뷰어 & 실시간 에디터

LaTeX 수학 공식, Mermaid 다이어그램, GFM 표, GitHub 스타일 알림(Alerts), 코드 구문 강조를 지원하는 고성능 브라우저 마크다운 도구입니다.

Markdown Source Editor137 lines • 586 words • 3088 chars
Live Rendered Preview~3 min read
📋Document Metadata
title차세대 마크다운 뷰어 & 에디터 가이드
authorWebTools
date2026-09-01
categoryDocument Utility
version2.0.0

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

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


# 💡 지원 기능 요약

    [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=mc2E = mc^2 이며, 오일러 공식은 eipi+1=0e^{ipi} + 1 = 0 입니다.

# 블록 수식

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

int−inftyinftye−x2,dx=sqrtpiint_{-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)
11

마크다운 뷰어 및 에디터 사용 가이드

서버 업로드 없이 브라우저 메모리에서 안전하고 빠르게 마크다운을 편집하고 렌더링하세요.

💡 사용 방법 (단계별 안내)

  1. 직접 텍스트를 입력하거나 "Open File" 버튼으로 .md 파일을 불러옵니다.
  2. 상단 툴바에서 View / Edit / Split 모드를 선택하여 편리하게 작업합니다.
  3. 수식($$...$$), Mermaid 다이어그램, 코드 구문 강조 등 다양한 확장을 실시간 확인합니다.
  4. 작업 완료 후 .MD 다운로드, .HTML 내보내기, 클립보드 복사 또는 인쇄(PDF)를 진행합니다.

🔒 주요 특징 및 브라우저 처리 원리

LaTeX 수식 (KaTeX) & Mermaid 완벽 지원

인라인 및 블록 수식부터 플로우차트, 시퀀스, 간트차트 등 복잡한 다이어그램을 클라이언트에서 즉시 렌더링합니다.

100% 브라우저 메모리 안전 처리 (Zero Server Upload)

작성 중인 문서 데이터는 서버로 전송되지 않으며, 사용자의 브라우저 내부에서만 안전하게 처리 및 보관됩니다.

GitHub Flavored Markdown (GFM) 완벽 호환

테이블, 체크박스 목록, 취소선, GitHub Alert 콜아웃(Note, Tip, Warning 등)을 완벽 지원합니다.

다양한 내보내기 및 인쇄 최적화

마크다운 소스 및 단독 실행 가능한 HTML 파일 다운로드가 가능하며, 인쇄 시 본문 전용 레이아웃이 적용됩니다.

❓ 자주 묻는 질문 (FAQ)

Q. 작성 중인 마크다운 내용이 서버에 저장되거나 유출될 위험이 있나요?

A. 아닙니다. WebTools의 모든 처리는 사용자의 웹 브라우저 내부 메모리에서만 동작하므로 서버로 데이터가 일체 업로드되지 않아 기밀 문서도 안심하고 열람·편집할 수 있습니다.

Q. 수식(LaTeX)이나 Mermaid 다이어그램 문법은 어떻게 작성하나요?

A. 수식은 $...$(인라인) 또는 $$...$$(블록)으로 감싸며, 다이어그램은 ```mermaid 코드 블록 안에 표준 Mermaid 문법을 작성하시면 즉시 그래픽으로 렌더링됩니다. 상단 "Sample" 버튼을 누르시면 예제를 즉시 확인하실 수 있습니다.

Q. 작성한 문서를 PDF나 HTML 파일로 저장할 수 있나요?

A. 네, 상단 툴바의 ".HTML" 버튼을 누르면 스타일과 수식/하이라이트가 내장된 독립 실행 HTML로 다운로드되며, 인쇄 아이콘을 누른 후 "PDF로 저장"을 선택하시면 고품질 PDF로 출력할 수 있습니다.