English | 한국어

Markdown → HTML Converter

Try it in your browser — no install or signup; everything runs locally in your browser.

Write in markdown and get HTML where every style is baked inline (style="..."), so it looks the same wherever you paste it.

Why this exists

With the rise of AI, more and more writing is done in markdown — it is the format AI tools read and write. But markdown describes structure, not presentation, so a raw .md file is plain and not very pleasant for a human to read. This tool converts markdown into HTML that looks good to a reader and is ready to publish as-is.

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.

Where you can use it — Tistory, Naver Blog, WordPress, Notion, HTML email, and anywhere else that accepts HTML input (paste).

Features

• Live preview — renders instantly on the right, exactly as it will look when pasted
• Automatic inline styles — fixed line spacing, heading sizes, and margins to neutralize external CSS
• 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)
• Syntax highlighting — highlight.js colors are inlined so they survive wherever you paste
• Tables / blockquotes / lists / images (GFM)
• Callout boxes — > [!NOTE], > [!TIP], > [!WARNING], etc. become colored highlight boxes
• Diagrams (mermaid) — ```mermaid blocks are converted to inline SVG and embedded directly
• HTML source tab — inspect and copy the generated HTML directly
• Dark / light background preview — toggle to check how it looks on a dark background
• Scroll sync — the preview follows the editor as you scroll (handy for long posts)
• Character / word counter — shows the length of your draft in real time
• HTML size indicator — shows the actual size of the output and warns when it gets large (some blogs cap length)
• Export to HTML file — save the result as a standalone .html file
• Keyboard shortcuts — with Ctrl/Cmd: S copy · O open file · B bold · I italic
• Tab indentation — Tab indents, Shift+Tab outdents; with a multi-line selection it indents every line at once (great for nested lists)
• Open files — load .md / .markdown / .txt via button or drag & drop
• Korean / English UI — switch language with the button in the header (choice is saved)
• Auto-save draft — your draft is saved in the browser (localStorage) and survives reloads (and the preview never stops even if saving fails)

How to use

1. Open index.html in a browser. (No install or server needed.)
2. Write markdown in the left pane.
3. Watch the right pane render exactly how it will look when pasted.
4. Click Copy HTML.
5. Paste it straight into your editor — the formatting comes with it.

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.

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.

Running locally

No server or build step required. Just keep index.html, styles.css, and the js/ folder together. Pick whichever option fits.

Option 1. Open the file directly (simplest)

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.)

# Clone the repo
git clone https://github.com/zooo-code/md2paste.git
cd md2paste

# Open in a browser
open index.html        # macOS
start index.html       # Windows
xdg-open index.html    # Linux

Option 2. Serve locally (recommended)

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.)

# Python (built into most OSes)
python -m http.server 8000

# Node.js
npx serve

# VS Code
# Right-click index.html → "Open with Live Server"

Then visit http://localhost:8000.

An internet connection is required, since the markdown parser (marked), code highlighter (highlight.js), and diagram renderer (mermaid) are loaded from a CDN.

Built with

• marked — markdown → HTML parser
• highlight.js — code syntax highlighting
• mermaid — text-based diagrams → SVG rendering

There is no build step; the libraries above are loaded from a CDN.

Structure

The JavaScript is split by responsibility into js/ (plain classic scripts loaded in order, so double-click via file:// keeps working):

md2paste/
├── index.html      # page structure (HTML)
├── styles.css      # app UI styles (CSS)
└── js/
    ├── i18n.js     # translations, samples, language state
    ├── theme.js    # inline style tables baked into the output
    ├── convert.js  # markdown → inline-styled HTML
    ├── diagram.js  # mermaid → inline SVG (cached)
    ├── storage.js  # draft auto-save
    ├── ui.js       # DOM refs, indicators, tabs, scroll sync
    ├── editor.js   # shortcuts, file I/O, copy, export
    └── app.js      # render pipeline, wiring, init

Supported markdown

Syntax	Example
Headings	# H1 ~ ###### H6
Emphasis	**bold**, *italic*, ~~strikethrough~~
Inline code	`code`
Code block	```python ... ```
List	- item, 1. item
Checklist	- [ ] todo, - [x] done
Blockquote	> quote
Callout	> [!NOTE], > [!TIP], > [!IMPORTANT], > [!WARNING], > [!CAUTION]
Table	| Item | Description |
Link / Image	[text](url), 
Diagram	```mermaid ... ```
Divider	---

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.

License

MIT License — free to use, modify, and distribute.