md2paste/index.html at master · zooo-code/md2paste · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>마크다운 → HTML 변환기</title>

<meta name="description" content="마크다운을 어디에 붙여넣어도 깨지지 않는 인라인 스타일 HTML로 변환합니다. Convert markdown to inline-styled HTML that survives pasting anywhere — Tistory, Naver Blog, WordPress, Notion, email.">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📝</text></svg>">

<!-- Social sharing card (Open Graph + Twitter) -->
<meta property="og:type" content="website">
<meta property="og:title" content="md2paste — 마크다운 → HTML 변환기">
<meta property="og:description" content="마크다운을 어디에 붙여넣어도 깨지지 않는 인라인 스타일 HTML로 변환합니다. 티스토리·네이버 블로그·워드프레스·노션·이메일 어디든.">
<meta property="og:url" content="https://zooo-code.github.io/md2paste/">
<meta property="og:image" content="https://zooo-code.github.io/md2paste/docs/screenshot.png">
<meta name="twitter:card" content="summary_large_image">

<!-- Markdown parser & code highlighter & diagrams (CDN) -->
<script src="https://cdn.jsdelivr.net/npm/marked@4.3.0/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.9.1/dist/mermaid.min.js"></script>

<link rel="stylesheet" href="styles.css">
</head>
<body>

<header>
  <h1 id="appTitle">📝 마크다운 → HTML 변환기</h1>
  <div class="spacer"></div>
  <button class="ghost" id="langBtn" title="Language / 언어">EN</button>
  <button class="ghost" id="loadBtn" title="Ctrl/Cmd + O">파일 열기</button>
  <button class="ghost" id="clearBtn">비우기</button>
  <button class="ghost" id="exportBtn">HTML 내보내기</button>
  <button id="copyBtn" title="Ctrl/Cmd + S">HTML 복사</button>
  <input type="file" id="fileInput" accept=".md,.markdown,.txt" hidden>
</header>

<main>
  <div class="pane">
    <div class="pane-label"><span id="inputLabel">✍️ 마크다운 입력</span> <span id="counter">0자 · 0단어</span></div>
    <textarea id="input" placeholder="여기에 마크다운을 작성하세요..." spellcheck="false"></textarea>
  </div>
  <div class="pane">
    <div class="pane-label">
      <span id="previewLabel">👁️ 미리보기 (붙여넣었을 때 보일 모습)</span>
      <span id="htmlSize" title="복사·내보내기될 HTML의 용량">0 KB</span>
      <div class="tabs">
        <button id="tabPreview" class="active">미리보기</button>
        <button id="tabSource">HTML 소스</button>
        <button id="skinToggle" title="어두운 배경에서 어떻게 보일지 확인">🌙 다크 배경</button>
      </div>
    </div>
    <div id="preview"></div>
    <pre id="htmlSource"></pre>
  </div>
</main>

<div class="toast" id="toast"></div>

<!-- App scripts — classic (non-module) scripts loaded in dependency order so the
     page still works via file:// (double-click). Each file has one responsibility. -->
<script src="js/i18n.js"></script>     <!-- translations, samples, language state -->
<script src="js/theme.js"></script>    <!-- inline style tables for the output -->
<script src="js/convert.js"></script>  <!-- markdown → inline-styled HTML -->
<script src="js/diagram.js"></script>  <!-- mermaid → inline SVG (cached) -->
<script src="js/storage.js"></script>  <!-- draft auto-save -->
<script src="js/ui.js"></script>       <!-- DOM refs, indicators, tabs, scroll sync -->
<script src="js/editor.js"></script>   <!-- shortcuts, file I/O, copy, export -->
<script src="js/app.js"></script>      <!-- render pipeline, wiring, init -->
</body>
</html>