Skip to content

Commit 26c01ce

Browse files
zooo-codezooo-code
committed
Initial commit
0 parents  commit 26c01ce

14 files changed

Lines changed: 1299 additions & 0 deletions

File tree

‎.gitignore‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# IDE / editor settings
2+
.idea/
3+
.vscode/
4+
*.iml
5+
6+
# OS files
7+
.DS_Store
8+
Thumbs.db
9+
10+
# Logs
11+
*.log
12+
npm-debug.log*
13+
14+
# Dependencies (in case anyone adds tooling later)
15+
node_modules/

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2026 zooo-code
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.ko.md‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
[English](README.md) | 한국어
2+
3+
# 마크다운 → HTML 변환기
4+
5+
마크다운으로 글을 쓰면, **어디에 붙여넣어도 동일하게 보이도록** 모든 스타일을 인라인(`style="..."`)으로 박아 넣은 HTML로 변환해 주는 도구입니다.
6+
7+
많은 블로그·CMS는 외부 CSS나 클래스를 무시해서, 일반 HTML을 붙여넣으면 줄간격·제목·코드블록이 깨지기 쉽습니다. 그래서 이 도구는 문단·제목·코드블록·표 등 모든 요소에 스타일을 직접 입혀, 글쓰기 화면에 붙여넣기만 하면 깨지지 않고 그대로 보이게 합니다.
8+
9+
> **이런 곳에서 쓸 수 있어요** — 티스토리, 네이버 블로그, 워드프레스, 노션, HTML 메일 등 **HTML 입력(붙여넣기)을 지원하는 곳이면 어디든** 동작합니다.
10+
11+
## 주요 기능
12+
13+
- **실시간 미리보기** — 입력하는 즉시 오른쪽에 붙여넣었을 때 보일 모습으로 렌더링
14+
- **인라인 스타일 자동 적용** — 줄간격·제목 크기·여백을 고정해 외부 CSS 영향 제거
15+
- **리치 텍스트 복사** — `HTML 복사`를 누르면 서식이 그대로 클립보드에 담겨, 대부분의 에디터에 일반 모드로 바로 붙여넣을 수 있음 (HTML 소스도 함께 담겨 `HTML` 모드 붙여넣기도 지원)
16+
- **코드 하이라이팅** — highlight.js 색상을 인라인으로 박아 붙여넣는 곳에서도 색이 유지됨
17+
- **표 / 인용구 / 목록 / 이미지** 지원 (GFM)
18+
- **알림 박스(콜아웃)** — `> [!NOTE]`, `> [!TIP]`, `> [!WARNING]` 등을 색깔 강조 박스로 변환
19+
- **다이어그램(mermaid)** — ` ```mermaid ` 블록을 인라인 SVG로 변환해 글에 그대로 내장
20+
- **HTML 소스 보기 탭** — 변환된 HTML을 직접 확인·복사
21+
- **다크/라이트 배경 미리보기** — 어두운 배경에서 어떻게 보일지 토글로 확인
22+
- **스크롤 동기화** — 에디터를 스크롤하면 미리보기도 같은 위치로 따라감 (긴 글 작성에 유용)
23+
- **글자/단어 수 카운터** — 작성 중인 글의 분량을 실시간으로 표시
24+
- **HTML 용량 표시** — 붙여넣을 HTML의 실제 크기를 표시하고, 너무 크면 경고(일부 블로그의 길이 제한 대비)
25+
- **HTML 파일로 내보내기** — 변환 결과를 단독으로 열리는 `.html` 파일로 저장
26+
- **키보드 단축키** — `Ctrl/Cmd`와 함께: `S` 복사 · `O` 파일 열기 · `B` 굵게 · `I` 기울임
27+
- **Tab 들여쓰기** — `Tab`으로 들여쓰기, `Shift+Tab`으로 내어쓰기. 여러 줄을 선택하면 한 번에 들여쓰기(중첩 목록에 유용)
28+
- **파일 열기** — 버튼 또는 **드래그 앤 드롭**으로 `.md` / `.markdown` / `.txt` 불러오기
29+
- **한국어 / English UI** — 상단 버튼으로 언어 전환 (선택은 자동 저장)
30+
- **자동 임시저장** — 작성 중인 글이 브라우저에 자동 저장(localStorage)돼 새로고침해도 유지 (저장 실패 시에도 미리보기는 멈추지 않음)
31+
32+
## 사용 방법
33+
34+
1. `index.html` 파일을 브라우저로 엽니다. (별도 설치·서버 불필요)
35+
2. 왼쪽 칸에 마크다운을 작성합니다.
36+
3. 오른쪽에서 붙여넣었을 때 보일 모습을 실시간으로 확인합니다.
37+
4. **`HTML 복사`** 버튼을 누릅니다.
38+
5. 글쓰기 화면에 **그대로 붙여넣기** 합니다. (서식이 그대로 들어갑니다)
39+
40+
> **리치 텍스트로 복사됩니다** — 티스토리·네이버 블로그·노션 등 대부분의 에디터는 일반 모드에서 그냥 붙여넣어도 서식이 그대로 적용됩니다. `HTML` 모드를 쓰는 에디터라면, 같은 복사본에 HTML 소스도 함께 담겨 있어 그대로 붙여넣으면 됩니다.
41+
>
42+
> 복사가 안 될 경우(일부 브라우저는 `file://`에서 클립보드를 제한함), `HTML 소스` 탭으로 이동해 내용을 직접 복사하거나 아래 **로컬 서버** 방법으로 실행하세요.
43+
44+
## 로컬에서 실행하기
45+
46+
서버나 빌드 과정 없이 동작합니다. `index.html`, `styles.css`, `js/` 폴더를 **함께** 두기만 하면 됩니다. 상황에 맞게 아래 중 하나를 선택하세요.
47+
48+
### 방법 1. 파일을 바로 열기 (가장 간단)
49+
50+
`index.html`을 더블클릭하거나 브라우저로 끌어다 놓으면 됩니다. (CSS·JS는 일반 `<link>`·`<script>`로 불러오므로 `file://` 더블클릭으로도 잘 동작합니다.)
51+
52+
```bash
53+
# 저장소 받기
54+
git clone https://github.com/zooo-code/md2paste.git
55+
cd md2paste
56+
57+
# 운영체제별로 브라우저에서 열기
58+
open index.html # macOS
59+
start index.html # Windows
60+
xdg-open index.html # Linux
61+
```
62+
63+
### 방법 2. 로컬 서버로 띄우기 (권장)
64+
65+
일부 브라우저는 `file://`로 열었을 때 **클립보드 복사**가 제한될 수 있습니다. 이 경우 간단한 로컬 서버로 띄우면 안정적으로 동작합니다. (설치 도구에 따라 택1)
66+
67+
```bash
68+
# Python (대부분의 OS에 기본 내장)
69+
python -m http.server 8000
70+
71+
# Node.js 사용 시
72+
npx serve
73+
74+
# VS Code 사용 시
75+
# index.html 우클릭 → "Open with Live Server"
76+
```
77+
78+
이후 브라우저에서 `http://localhost:8000` 에 접속합니다.
79+
80+
> 인터넷 연결이 필요합니다. 마크다운 파서(marked), 코드 하이라이터(highlight.js), 다이어그램 렌더러(mermaid)를 CDN으로 불러오기 때문입니다.
81+
82+
## 사용 기술
83+
84+
- **[marked](https://marked.js.org/)** — 마크다운 → HTML 파서
85+
- **[highlight.js](https://highlightjs.org/)** — 코드 구문 강조
86+
- **[mermaid](https://mermaid.js.org/)** — 텍스트 기반 다이어그램 → SVG 렌더링
87+
88+
별도 빌드 과정이 없으며, 위 라이브러리는 CDN으로 불러옵니다.
89+
90+
## 구성
91+
92+
JavaScript는 역할별로 `js/` 폴더에 분리되어 있습니다 (순서대로 로드되는 클래식 스크립트라 `file://` 더블클릭도 그대로 동작):
93+
94+
```
95+
md2paste/
96+
├── index.html # 화면 구조(HTML)
97+
├── styles.css # 앱 UI 스타일(CSS)
98+
└── js/
99+
├── i18n.js # 다국어 사전·샘플·언어 상태
100+
├── theme.js # 출력에 입히는 인라인 스타일 테이블
101+
├── convert.js # 마크다운 → 인라인 스타일 HTML
102+
├── diagram.js # mermaid → 인라인 SVG (캐싱)
103+
├── storage.js # 초안 자동 저장
104+
├── ui.js # DOM 참조·표시·탭·스크롤 동기화
105+
├── editor.js # 단축키·파일 IO·복사·내보내기
106+
└── app.js # 렌더 파이프라인·연결·초기화
107+
```
108+
109+
## 지원하는 마크다운 문법
110+
111+
| 문법 | 예시 |
112+
|------|------|
113+
| 제목 | `# H1` ~ `###### H6` |
114+
| 강조 | `**굵게**`, `*기울임*`, `~~취소선~~` |
115+
| 인라인 코드 | `` `code` `` |
116+
| 코드블록 | ` ```python ... ``` ` |
117+
| 목록 | `- 항목`, `1. 항목` |
118+
| 체크리스트 | `- [ ] 할 일`, `- [x] 완료` |
119+
| 인용구 | `> 인용` |
120+
| 알림 박스 | `> [!NOTE]`, `> [!TIP]`, `> [!IMPORTANT]`, `> [!WARNING]`, `> [!CAUTION]` |
121+
| 표 | `\| 항목 \| 설명 \|` |
122+
| 링크 / 이미지 | `[텍스트](url)`, `![alt](url)` |
123+
| 다이어그램 | ` ```mermaid ... ``` ` |
124+
| 구분선 | `---` |
125+
126+
> **mermaid 다이어그램 참고** — 다이어그램은 인라인 SVG로 변환되어 글에 내장됩니다. 대부분의 환경에서 그대로 보이지만, 일부 블로그(티스토리·네이버 등)의 HTML 에디터는 붙여넣을 때 SVG를 필터링·변형할 수 있어 결과가 다를 수 있습니다. 안전을 원하면 미리보기의 다이어그램을 이미지로 캡처해 직접 업로드하세요.
127+
128+
## 라이선스
129+
130+
[MIT License](LICENSE) — 자유롭게 사용·수정·배포할 수 있습니다.

‎README.md‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
English | [한국어](README.ko.md)
2+
3+
# Markdown → HTML Converter
4+
5+
Write in markdown and get HTML where **every style is baked inline** (`style="..."`), so it looks the same **wherever you paste it**.
6+
7+
Many blogs and CMSs ignore external CSS and classes, so plain HTML often breaks on paste — line spacing, headings, and code blocks fall apart. This tool writes styles directly onto every element (paragraphs, headings, code blocks, tables, and more), so it stays intact the moment you paste it into an editor.
8+
9+
> **Where you can use it** — Tistory, Naver Blog, WordPress, Notion, HTML email, and anywhere else that **accepts HTML input (paste)**.
10+
11+
## Features
12+
13+
- **Live preview** — renders instantly on the right, exactly as it will look when pasted
14+
- **Automatic inline styles** — fixed line spacing, heading sizes, and margins to neutralize external CSS
15+
- **Rich-text copy** — `Copy HTML` puts the formatted result on your clipboard, so you can paste it straight into most editors in normal mode (the HTML source is included too, for `HTML`-mode editors)
16+
- **Syntax highlighting** — highlight.js colors are inlined so they survive wherever you paste
17+
- **Tables / blockquotes / lists / images** (GFM)
18+
- **Callout boxes** — `> [!NOTE]`, `> [!TIP]`, `> [!WARNING]`, etc. become colored highlight boxes
19+
- **Diagrams (mermaid)** — ` ```mermaid ` blocks are converted to inline SVG and embedded directly
20+
- **HTML source tab** — inspect and copy the generated HTML directly
21+
- **Dark / light background preview** — toggle to check how it looks on a dark background
22+
- **Scroll sync** — the preview follows the editor as you scroll (handy for long posts)
23+
- **Character / word counter** — shows the length of your draft in real time
24+
- **HTML size indicator** — shows the actual size of the output and warns when it gets large (some blogs cap length)
25+
- **Export to HTML file** — save the result as a standalone `.html` file
26+
- **Keyboard shortcuts** — with `Ctrl/Cmd`: `S` copy · `O` open file · `B` bold · `I` italic
27+
- **Tab indentation** — `Tab` indents, `Shift+Tab` outdents; with a multi-line selection it indents every line at once (great for nested lists)
28+
- **Open files** — load `.md` / `.markdown` / `.txt` via button or **drag & drop**
29+
- **Korean / English UI** — switch language with the button in the header (choice is saved)
30+
- **Auto-save draft** — your draft is saved in the browser (localStorage) and survives reloads (and the preview never stops even if saving fails)
31+
32+
## How to use
33+
34+
1. Open `index.html` in a browser. (No install or server needed.)
35+
2. Write markdown in the left pane.
36+
3. Watch the right pane render exactly how it will look when pasted.
37+
4. Click **`Copy HTML`**.
38+
5. **Paste it straight into your editor** — the formatting comes with it.
39+
40+
> **It copies as rich text** — most editors (Tistory, Naver Blog, Notion, etc.) keep the formatting when you paste in normal mode. For editors that use an `HTML` mode, the same copy also carries the HTML source, so pasting there works too.
41+
>
42+
> If copying doesn't work (some browsers restrict the clipboard on `file://`), open the `HTML Source` tab and copy manually, or run it via the **local server** option below.
43+
44+
## Running locally
45+
46+
No server or build step required. Just keep `index.html`, `styles.css`, and the `js/` folder **together**. Pick whichever option fits.
47+
48+
### Option 1. Open the file directly (simplest)
49+
50+
Double-click `index.html` or drag it into a browser. (CSS and JS load via plain `<link>`/`<script>`, so double-clicking via `file://` works fine.)
51+
52+
```bash
53+
# Clone the repo
54+
git clone https://github.com/zooo-code/md2paste.git
55+
cd md2paste
56+
57+
# Open in a browser
58+
open index.html # macOS
59+
start index.html # Windows
60+
xdg-open index.html # Linux
61+
```
62+
63+
### Option 2. Serve locally (recommended)
64+
65+
Some browsers restrict **clipboard copy** when a page is opened via `file://`. In that case a small local server works reliably. (Pick one based on what you have installed.)
66+
67+
```bash
68+
# Python (built into most OSes)
69+
python -m http.server 8000
70+
71+
# Node.js
72+
npx serve
73+
74+
# VS Code
75+
# Right-click index.html → "Open with Live Server"
76+
```
77+
78+
Then visit `http://localhost:8000`.
79+
80+
> An internet connection is required, since the markdown parser (marked), code highlighter (highlight.js), and diagram renderer (mermaid) are loaded from a CDN.
81+
82+
## Built with
83+
84+
- **[marked](https://marked.js.org/)** — markdown → HTML parser
85+
- **[highlight.js](https://highlightjs.org/)** — code syntax highlighting
86+
- **[mermaid](https://mermaid.js.org/)** — text-based diagrams → SVG rendering
87+
88+
There is no build step; the libraries above are loaded from a CDN.
89+
90+
## Structure
91+
92+
The JavaScript is split by responsibility into `js/` (plain classic scripts loaded in order, so double-click via `file://` keeps working):
93+
94+
```
95+
md2paste/
96+
├── index.html # page structure (HTML)
97+
├── styles.css # app UI styles (CSS)
98+
└── js/
99+
├── i18n.js # translations, samples, language state
100+
├── theme.js # inline style tables baked into the output
101+
├── convert.js # markdown → inline-styled HTML
102+
├── diagram.js # mermaid → inline SVG (cached)
103+
├── storage.js # draft auto-save
104+
├── ui.js # DOM refs, indicators, tabs, scroll sync
105+
├── editor.js # shortcuts, file I/O, copy, export
106+
└── app.js # render pipeline, wiring, init
107+
```
108+
109+
## Supported markdown
110+
111+
| Syntax | Example |
112+
|--------|---------|
113+
| Headings | `# H1` ~ `###### H6` |
114+
| Emphasis | `**bold**`, `*italic*`, `~~strikethrough~~` |
115+
| Inline code | `` `code` `` |
116+
| Code block | ` ```python ... ``` ` |
117+
| List | `- item`, `1. item` |
118+
| Checklist | `- [ ] todo`, `- [x] done` |
119+
| Blockquote | `> quote` |
120+
| Callout | `> [!NOTE]`, `> [!TIP]`, `> [!IMPORTANT]`, `> [!WARNING]`, `> [!CAUTION]` |
121+
| Table | `\| Item \| Description \|` |
122+
| Link / Image | `[text](url)`, `![alt](url)` |
123+
| Diagram | ` ```mermaid ... ``` ` |
124+
| Divider | `---` |
125+
126+
> **Note on mermaid diagrams** — diagrams are converted to inline SVG and embedded in the document. They show up correctly in most environments, but some blog HTML editors may filter or alter SVG on paste, so results can vary. For maximum safety, capture the diagram from the preview as an image and upload it manually.
127+
128+
## License
129+
130+
[MIT License](LICENSE) — free to use, modify, and distribute.

‎index.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html lang="ko">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>마크다운 → HTML 변환기</title>
7+
8+
<!-- Markdown parser & code highlighter & diagrams (CDN) -->
9+
<script src="https://cdn.jsdelivr.net/npm/marked@4.3.0/marked.min.js"></script>
10+
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
11+
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.9.1/dist/mermaid.min.js"></script>
12+
13+
<link rel="stylesheet" href="styles.css">
14+
</head>
15+
<body>
16+
17+
<header>
18+
<h1 id="appTitle">📝 마크다운 → HTML 변환기</h1>
19+
<div class="spacer"></div>
20+
<button class="ghost" id="langBtn" title="Language / 언어">EN</button>
21+
<button class="ghost" id="loadBtn" title="Ctrl/Cmd + O">파일 열기</button>
22+
<button class="ghost" id="clearBtn">비우기</button>
23+
<button class="ghost" id="exportBtn">HTML 내보내기</button>
24+
<button id="copyBtn" title="Ctrl/Cmd + S">HTML 복사</button>
25+
<input type="file" id="fileInput" accept=".md,.markdown,.txt" hidden>
26+
</header>
27+
28+
<main>
29+
<div class="pane">
30+
<div class="pane-label"><span id="inputLabel">✍️ 마크다운 입력</span> <span id="counter">0자 · 0단어</span></div>
31+
<textarea id="input" placeholder="여기에 마크다운을 작성하세요..." spellcheck="false"></textarea>
32+
</div>
33+
<div class="pane">
34+
<div class="pane-label">
35+
<span id="previewLabel">👁️ 미리보기 (붙여넣었을 때 보일 모습)</span>
36+
<span id="htmlSize" title="복사·내보내기될 HTML의 용량">0 KB</span>
37+
<div class="tabs">
38+
<button id="tabPreview" class="active">미리보기</button>
39+
<button id="tabSource">HTML 소스</button>
40+
<button id="skinToggle" title="어두운 배경에서 어떻게 보일지 확인">🌙 다크 배경</button>
41+
</div>
42+
</div>
43+
<div id="preview"></div>
44+
<pre id="htmlSource"></pre>
45+
</div>
46+
</main>
47+
48+
<div class="toast" id="toast"></div>
49+
50+
<!-- App scripts — classic (non-module) scripts loaded in dependency order so the
51+
page still works via file:// (double-click). Each file has one responsibility. -->
52+
<script src="js/i18n.js"></script> <!-- translations, samples, language state -->
53+
<script src="js/theme.js"></script> <!-- inline style tables for the output -->
54+
<script src="js/convert.js"></script> <!-- markdown → inline-styled HTML -->
55+
<script src="js/diagram.js"></script> <!-- mermaid → inline SVG (cached) -->
56+
<script src="js/storage.js"></script> <!-- draft auto-save -->
57+
<script src="js/ui.js"></script> <!-- DOM refs, indicators, tabs, scroll sync -->
58+
<script src="js/editor.js"></script> <!-- shortcuts, file I/O, copy, export -->
59+
<script src="js/app.js"></script> <!-- render pipeline, wiring, init -->
60+
</body>
61+
</html>

0 commit comments

Comments
 (0)