How to convert markdown to github-themed html
- Step 1Add your Markdown — Paste your README or doc into the editor, or switch to Upload and drop one
.md,.mdx,.markdown, or.txtfile. This tool takes a single file at a time — it does not accept multiple files. - Step 2Run the conversion — Click Run. The tool calls marked with its default GFM config and wraps the rendered body in a GitHub dark-theme HTML document. There are no options to choose — the conversion is deterministic.
- Step 3Check the live preview — The sandboxed iframe loads the Primer CSS from CDN and shows the rendered page exactly as the dark theme styles it. Toggle Raw to inspect the generated HTML source.
- Step 4Verify GFM features — Confirm tables, task-list checkboxes, and strikethrough rendered as expected. If you used
[!NOTE]alerts, footnotes, or$math$, note that these stay as literal text — see the edge cases below. - Step 5Copy or download — Copy the HTML to paste into a CMS or static site, or Download to save
<name>-github.html. The body is portable; keep an internet connection for the CDN theme to load on view. - Step 6Want a self-contained or light file? — To inline the CSS or swap to a light theme, edit the downloaded file's
<link>by hand, or use md-to-html which emits a self-contained document with inlined styles.
What renders and what does not
Feature support is determined entirely by marked 14.1.4 running in its default (GFM) configuration. GitHub-only extensions that marked does not implement are listed as Not supported with the exact fallback behaviour.
| Markdown feature | Status in this tool | What you actually get |
|---|---|---|
Pipe tables (| a | b |) | Supported (GFM) | Rendered as a styled <table> with Primer borders |
Task lists (- [ ] / - [x]) | Supported (GFM) | Rendered as disabled <input type="checkbox">, checked for [x] |
Strikethrough (~~text~~) | Supported (GFM) | Wrapped in <del> |
Bare-URL autolinks (www.example.com) | Supported (GFM) | Auto-converted to a clickable <a> |
| Fenced code blocks | Supported (no colour) | <pre><code class="language-xxx"> — class hook only, no syntax highlighting is applied |
GitHub alerts (> [!NOTE]) | Not supported | Renders as a plain blockquote with the literal [!NOTE] text visible |
Footnotes ([^1]) | Not supported | [^1] becomes a broken inline link; the definition is left as stray text |
Inline / block math ($E=mc^2$) | Not supported | Printed verbatim — no KaTeX/MathJax is loaded |
@mention / #issue autolinks | Not supported | Stays as plain text — GitHub's link resolution is server-side |
Output document anatomy
Every run produces the same structure. There is no schema and no options panel for this tool.
| Part of the output | Value | Notes |
|---|---|---|
| Doctype + wrapper | <!DOCTYPE html> … <body class="markdown-body"> | Primer scopes its styles to .markdown-body |
| Stylesheet | github-markdown-dark.min.css 5.5.1 via cdnjs <link> | Always dark; loaded from CDN, not inlined |
Inline <style> | Page background #0d1117, container #161b22, 800px max width | A small wrapper to frame the body the way github.com does |
| Body HTML | marked default GFM output | Portable on its own even without the CDN theme |
| Download filename | <name>-github.html | Derived from the source file name |
Cookbook
Concrete before/after conversions. Input is the Markdown you paste; output is the structural HTML marked produces inside the GitHub-dark wrapper (the boilerplate <head> is the same every time, so it is abbreviated here).
A README heading + badge row
Standard README intro. Bare image links and inline links render; the dark Primer theme handles the rest.
Input (README.md): # Acme CLI  A fast command-line tool. See the [docs](https://acme.dev). Output body: <h1>Acme CLI</h1> <p><img src="https://img.shields.io/badge/build-passing-green" alt="build"></p> <p>A fast command-line tool. See the <a href="https://acme.dev">docs</a>.</p>
GFM table renders cleanly
Pipe tables are core GFM and marked renders them to a real table with thead/tbody. The dark Primer CSS draws the borders.
Input: | Flag | Default | Description | |------|---------|-------------| | --verbose | false | extra logging | | --out | ./dist | output dir | Output body (abbreviated): <table> <thead><tr><th>Flag</th><th>Default</th><th>Description</th></tr></thead> <tbody> <tr><td>--verbose</td><td>false</td><td>extra logging</td></tr> <tr><td>--out</td><td>./dist</td><td>output dir</td></tr> </tbody></table>
Task list becomes checkboxes
GFM task-list items render as disabled checkboxes — the same widget GitHub shows in issues and READMEs.
Input: - [x] Parser implemented - [ ] CLI flags wired Output body: <ul> <li><input checked="" disabled="" type="checkbox"> Parser implemented</li> <li><input disabled="" type="checkbox"> CLI flags wired</li> </ul>
A GitHub alert does NOT become a callout
GitHub's [!NOTE] / [!WARNING] callout boxes are a GitHub-specific extension marked does not implement. The text appears verbatim inside an ordinary blockquote.
Input: > [!NOTE] > Requires Node 20+. What you might expect (GitHub.com): a blue NOTE callout box. What this tool produces: <blockquote> <p>[!NOTE] Requires Node 20+.</p> </blockquote> Fix: keep the prose, drop the [!NOTE] marker for offline use, or accept the literal text — there is no alert rendering here.
Code block: class hook, but no colour
Fenced blocks get a language class so a downstream highlighter could colour them, but this tool does not load one. The code is monospaced and boxed by Primer, not syntax-coloured.
Input: ```js const sum = (a, b) => a + b; ``` Output body: <pre><code class="language-js">const sum = (a, b) => a + b; </code></pre> Note: the language-js class is present but no highlighter runs, so tokens are not coloured in the rendered page.
Edge cases and what actually happens
Output not self-contained — CSS is a CDN link
By designThe document references github-markdown-dark.min.css 5.5.1 via a cdnjs <link>; the CSS is not inlined. Open the saved .html without internet and you see unstyled HTML. The body markup is correct and portable — only the Primer theme needs the network. For a fully offline file, inline the stylesheet by hand or use md-to-html, which embeds its styles.
Theme is always dark
By designThis tool links the dark Primer stylesheet on every run; there is no light/dark toggle in the UI. To get a light theme, edit the downloaded file's <link> to point at the github-markdown-light variant, and adjust the inline background colours.
GitHub alert syntax stays literal
Not supported> [!NOTE], [!TIP], [!WARNING], [!IMPORTANT], [!CAUTION] are not callouts here. marked renders the blockquote and leaves [!NOTE] as visible text. Nothing breaks — it just is not a coloured callout box like github.com shows.
Footnotes break
Not supportedmarked's default config does not implement GFM footnotes. [^1] is parsed as a link to #1-style target that does not exist, and the [^1]: ... definition is left as loose text. If footnotes matter, restructure them as inline parentheticals before converting.
Math is printed verbatim
Not supported$E=mc^2$ and $$...$$ blocks render as literal characters — no KaTeX or MathJax is loaded. GitHub renders math server-side; this tool does not. Use an image of the equation if it must appear styled.
No syntax highlighting in code blocks
ExpectedFenced blocks receive a language-xxx class but no highlighter runs, so code is monospaced and boxed but not colour-tokenised. The class is a hook you could wire to highlight.js in the downloaded file if needed.
Relative image paths do not resolve in preview
ExpectedThe preview renders via an iframe srcDoc with no base origin, so  has nothing to resolve against and shows a broken image. Use absolute URLs (for example raw.githubusercontent.com/...) for images you want visible in the preview and downloaded file.
Empty or whitespace-only input
ExpectedRunning with no content produces the wrapper document with an empty .markdown-body. No error is thrown; you just get a styled-but-blank page.
Over the tier character limit
rejectedFree tier caps input at 500,000 characters and 1 MB. A larger paste or file is rejected before conversion. Pro raises this to 5,000,000 chars / 10 MB; see the FAQ for the full ladder.
Multiple files at once
rejectedThis converter takes one file per run (it does not accept multiple). To combine several Markdown files into one document first, use md-merger, then convert the merged result here.
Frequently asked questions
Does this match GitHub's rendering exactly?
Very closely for standard content — it uses GitHub's own public Primer stylesheet (github-markdown-dark.min.css 5.5.1) over marked's GFM output, so headings, tables, lists, blockquotes, and code surfaces look like github.com. Differences appear only with GitHub-specific extensions marked does not implement: [!NOTE] alert callouts, footnotes, math, and @mention linking.
Is the output self-contained / does it work offline?
No. The Primer CSS is referenced via a CDN <link>, not inlined, so opening the saved file offline shows unstyled HTML. The body markup itself is portable. For a fully offline document, inline the stylesheet manually or use md-to-html, which embeds its own styles.
Can I get the light theme?
Not from the tool — it always links the dark Primer stylesheet, and there is no toggle. After downloading, edit the <link> to the github-markdown-light build and adjust the inline background colours in the <style> block.
Does syntax highlighting work?
No colours are applied. Fenced code blocks get a class="language-xxx" hook, which a highlighter like highlight.js could use, but this tool does not load one. Code is monospaced and boxed by Primer, not token-coloured.
Do GFM tables and task lists render?
Yes. marked runs with GFM on by default, so pipe tables become real <table> elements and - [ ] / - [x] items render as disabled checkboxes — exactly like GitHub. Strikethrough and bare-URL autolinks also work.
Why use this instead of GitHub's own preview?
Offline-capable previews of the body, no upload of private content, embedding in a CMS or portfolio, and emailing a styled copy — all without pushing to GitHub. Just remember the theme loads from CDN when viewed.
What input formats can I use?
.md, .mdx, .markdown, and .txt, or pasted text. One file at a time. To convert many files, merge them first with md-merger.
What are the size limits?
Free: 1 MB / 500,000 characters / 1 file. Pro: 10 MB / 5,000,000 / 10. Pro-media: 50 MB / 20,000,000 / 50. Developer: 500 MB / unlimited. The character limit is separate from the byte limit — both apply.
Will my README content be uploaded?
No. Conversion runs entirely in your browser via marked. README text, internal docs, even pasted secrets stay on your machine. If you are pasting docs that may contain tokens, run md-secret-redactor first.
I want a PDF, not HTML — what should I use?
Use md-to-pdf-modern for a clean print-ready PDF or md-to-pdf-academic for a serif report layout. This tool only emits HTML.
Can I convert HTML back to Markdown?
Yes, with the sibling html-to-md tool, which uses Turndown to turn HTML into clean Markdown.
My table of contents links are broken — why?
marked slugifies heading anchors, but if your TOC links were hand-written for GitHub's slug rules they may not match marked's. Generate the TOC against this engine with md-toc-generator so the anchors line up.
Privacy first
All Markdown processing runs locally in your browser using JavaScript. No file is ever uploaded to JAD Apps servers — only metadata counters are saved for signed-in dashboard stats.