Drop in two files, write markdown directly in your HTML. no build step, no npm, no configuration.
Built on Web Components standards. No build step, no npm, no framework required — just two files.
One .js and one .css file. No npm, no bundler, no configuration of any kind.
Built on the native Custom Elements API. Works in all modern browsers alongside any framework — or none.
Styles never bleed in or out. Your page and your markdown content stay completely independent.
Write naturally indented markdown inside your HTML. Common leading whitespace is stripped automatically.
Uses currentColor and relative units — adapts to your page's text color and font size seamlessly.
Headings, bold, italic, strikethrough, code blocks, blockquotes, callouts, nested lists, task lists, tables, links, and images.
Elements added to the DOM after page load render automatically via connectedCallback.
~200 lines of readable JavaScript. Easy to audit, easy to understand, easy to fork.
No configuration required. Add two files and start writing markdown anywhere in your HTML.
Download mark-down.js and mark-down.css and place them in your project. That's the entire install.
Add mark-down.js to your <head> with defer. The CSS loads automatically from the same folder.
Place <mark-down> anywhere in your page body, write markdown inside it, and open in a browser.
<!-- Load once in <head> --> <script src="src/mark-down.js" defer></script> <!-- Use anywhere in <body> --> <mark-down> # Hello, World! This is **bold**, this is *italic*, and this is `inline code`. - Item one - Item two - Item three > A blockquote with *formatted* content inside. ```js console.log("Hello from a code block!"); ``` </mark-down>
These are real <mark-down> elements rendered by the library right now on this page.
All standard markdown constructs — write it exactly the way you already know.
| Markdown | Output | Notes |
|---|---|---|
| # Heading 1 | H1 through H6 | One to six # characters followed by a space |
| **bold** | bold | Also works with __double underscores__ |
| *italic* | italic | Also works with _single underscores_ |
| ***bold italic*** | bold italic | Triple asterisks for both at once |
| ~~strikethrough~~ | Double tildes | |
| `inline code` | inline code | Single backtick; content is HTML-escaped |
| ```lang … ``` | Code block | Fenced triple backticks; optional language hint |
| - item | Unordered list | Bullet characters: -, *, or + |
| 1. item | Ordered list | Any digit followed by a period and space |
| - sub-item | Nested list | Indent sub-items with 2+ spaces; can mix ordered and unordered |
| - [ ] task | Task list | [ ] unchecked, [x] checked; nests and mixes freely |
| > quote | Blockquote | Markdown renders recursively inside blockquotes |
| > [!NOTE] | Callout | GitHub-style alerts: NOTE, TIP, IMPORTANT, WARNING, CAUTION |
| --- | Horizontal rule | Three or more ---, ***, or ___ |
| [text](url) | Link | Standard inline link syntax |
|  | Image | Renders responsive with max-width: 100% |
| | col | col | | Table | GFM pipe table with header separator row |
| two trailing spaces | Line break | Hard <br> within a paragraph |
Every color, font, and border is a CSS variable — link a pre-built theme or override only what you need.
/* - Common - Variables modified in most themes. */ mark-down { /* Page */ --md-bg: transparent; --md-color: inherit; --md-padding: 0; /* Typography */ --md-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --md-line-height: 1.7; /* Links */ --md-link-color: #0969da; /* Code */ --md-code-bg: rgba(128, 128, 128, 0.15); --md-pre-bg: rgba(128, 128, 128, 0.12); /* Blockquote */ --md-blockquote-border-color: currentColor; /* Tables */ --md-table-border-color: #c8c8c8; --md-table-header-bg: rgba(128, 128, 128, 0.1); --md-table-stripe-bg: rgba(128, 128, 128, 0.05); /* Callouts */ --md-callout-note-color: #0969da; --md-callout-note-bg: rgba(9, 105, 218, 0.08); --md-callout-tip-color: #1a7f37; --md-callout-tip-bg: rgba(26, 127, 55, 0.08); --md-callout-important-color: #8250df; --md-callout-important-bg: rgba(130, 80, 223, 0.08); --md-callout-warning-color: #9a6700; --md-callout-warning-bg: rgba(154, 103, 0, 0.08); --md-callout-caution-color: #cf222e; --md-callout-caution-bg: rgba(207, 34, 46, 0.08); /* Checkboxes */ --md-checkbox-color: #0969da; --md-checkbox-filter: none; } /* - Less common - Override only when you need fine-grained control. */ mark-down { /* Typography */ --md-font-size: 1rem; --md-mono-font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; --md-code-font-size: 0.875em; /* Headings */ --md-heading-font-weight: 600; --md-h1-font-size: 2em; --md-h2-font-size: 1.5em; --md-h3-font-size: 1.25em; --md-h4-font-size: 1em; --md-h5-font-size: 0.875em; --md-h6-font-size: 0.85em; /* Code */ --md-code-radius: 4px; --md-pre-radius: 6px; /* Blockquote */ --md-blockquote-border-width: 4px; /* Images */ --md-img-radius: 4px; /* Tables */ --md-table-font-size: 0.95em; --md-table-radius: 6px; /* Callouts */ --md-callout-radius: 6px; }
Two files. No build step. No npm. Just drop them in and start writing markdown in your HTML today.