Markdown Parsing Engines for JavaScript Applications
markdown-it, remark, showdown, and markdown are JavaScript libraries designed to parse Markdown text and convert it into other formats, primarily HTML. markdown-it is known for speed and a robust plugin system that outputs HTML directly. remark is part of the unified ecosystem, focusing on abstract syntax trees (AST) for deep manipulation before rendering. showdown is a legacy-friendly option that closely follows the original Markdown.pl spec. The markdown package is an older library that is largely considered abandoned in modern development.
Npm Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Markdown Parsing Engines: Architecture, Security, and Extensibility
When building features that render user content, documentation, or blogs, selecting the right Markdown parser is critical for security and performance. markdown-it, remark, showdown, and markdown all solve this problem, but they differ in architecture, output format, and maintenance status. Let's compare how they handle real-world engineering tasks.
🏗️ Core Architecture: Direct HTML vs. Abstract Syntax Trees
The way these libraries process text defines how you interact with them. Some convert straight to HTML, while others build a tree structure first.
markdown-it parses Markdown directly into HTML strings.
- It is optimized for speed and immediate rendering.
- You do not see the intermediate structure unless you dig into internals.
// markdown-it: Direct HTML output
import MarkdownIt from 'markdown-it';
const md = new MarkdownIt();
const result = md.render('# Hello World');
// Output: <h1>Hello World</h1>
remark builds an Abstract Syntax Tree (AST) before rendering.
- You can inspect or change the tree before converting to HTML.
- Requires a plugin like
remark-htmlto get final output.
// remark: AST-based processing
import { remark } from 'remark';
import html from 'remark-html';
const result = await remark().use(html).process('# Hello World');
// Output: Vfile containing HTML string
showdown converts text to HTML using a rule-based system.
- It mimics the original Perl-based Markdown behavior.
- Focuses on simplicity rather than tree manipulation.
// showdown: Rule-based conversion
import showdown from 'showdown';
const converter = new showdown.Converter();
const result = converter.makeHtml('# Hello World');
// Output: <h1>Hello World</h1>
markdown is a legacy parser that outputs HTML directly.
- It follows an older specification and lacks modern optimizations.
- The API is synchronous and simple but inflexible.
// markdown: Legacy direct output
import { markdown } from 'markdown';
const result = markdown.toHTML('# Hello World');
// Output: <h1>Hello World</h1>
🔌 Extensibility: Plugins vs. Extensions
Real-world apps often need tables, task lists, or custom containers. How you add these features varies widely.
markdown-it uses a modular plugin system.
- You enable features via
.use()during initialization. - Hundreds of community plugins exist for specific needs.
// markdown-it: Plugin system
import MarkdownIt from 'markdown-it';
const md = new MarkdownIt().use(require('markdown-it-table'));
const result = md.render('| col |\n|---|');
remark relies on the unified plugin ecosystem.
- Plugins transform the AST at specific stages.
- You chain multiple plugins together for complex pipelines.
// remark: Unified plugin chain
import { remark } from 'remark';
import tables from 'remark-table';
const result = await remark().use(tables).process('| col |');
showdown uses a global extension registry.
- You define extensions as objects with regex rules.
- Less structured than modern plugin systems.
// showdown: Extension registry
import showdown from 'showdown';
showdown.extension('myExt', function () { /*...*/ });
const converter = new showdown.Converter();
markdown has no official plugin system.
- You must modify the source code to change behavior.
- This makes it unsuitable for custom requirements.
// markdown: No plugin support
// Developers must fork the library to add features
// No standard API for extensions exists
🔒 Security: Sanitization and XSS Protection
Rendering user input introduces security risks. Some libraries sanitize output, while others require you to handle it separately.
markdown-it disables raw HTML by default.
- You must explicitly enable HTML tags via options.
- Recommended to pair with a sanitizer like
sanitize-html.
// markdown-it: Secure by default
const md = new MarkdownIt({ html: false });
// Raw HTML tags will be escaped automatically
remark does not sanitize HTML by default.
- You need to add
remark-sanitizeor similar plugins. - Gives you full control over what tags are allowed.
// remark: Manual sanitization
import sanitize from 'remark-sanitize';
const result = await remark().use(sanitize).process(input);
showdown allows HTML but has safe mode options.
- You can toggle
safeModeto escape dangerous tags. - Older versions had known vulnerabilities, so keep updated.
// showdown: Safe mode toggle
const converter = new showdown.Converter({ safeMode: true });
// Escapes potentially dangerous HTML tags
markdown lacks modern security features.
- It does not protect against XSS attacks out of the box.
- Using it with user input is risky without external sanitizers.
// markdown: No built-in security
// Requires external sanitization library
// Not recommended for untrusted user content
🌐 Real-World Scenarios
Scenario 1: Blog Engine with Custom Components
You need to render posts with tables and custom alerts.
- ✅ Best choice:
markdown-it - Why? Rich plugin ecosystem handles tables and containers easily.
// markdown-it example
const md = new MarkdownIt()
.use(require('markdown-it-table'))
.use(require('markdown-it-container'));
Scenario 2: Static Site Generator
You need to extract headings for a table of contents before rendering.
- ✅ Best choice:
remark - Why? AST access allows you to read headings without parsing HTML.
// remark example
const tree = remark().parse(input);
// Traverse tree.children to find headings
Scenario 3: Legacy Internal Tool
You are updating an old app that already uses Markdown logic.
- ✅ Best choice:
showdown - Why? Close spec compatibility reduces migration effort.
// showdown example
const converter = new showdown.Converter();
// Drop-in replacement for older Markdown logic
Scenario 4: Maintenance Mode Only
You are fixing bugs in a system built five years ago.
- ⚠️ Legacy choice:
markdown - Why? Only use if you cannot migrate away yet.
// markdown example
// Plan to migrate to markdown-it or remark ASAP
📊 Summary: Key Differences
| Feature | markdown-it | remark | showdown | markdown |
|---|---|---|---|---|
| Output | HTML String | AST → HTML | HTML String | HTML String |
| Extensibility | Plugin System | Unified Plugins | Extension Registry | None (Source Edit) |
| Security | HTML Disabled by Default | Manual Sanitization | Safe Mode Option | None |
| Maintenance | Active | Active | Active | Abandoned |
| Performance | High | Moderate (AST Overhead) | Moderate | Low |
💡 The Big Picture
markdown-it is like a high-performance engine 🏎️ — built for speed and flexibility in web rendering. Ideal for blogs, documentation sites, and any project needing robust HTML output with plugins.
remark is like a surgical toolkit 🔪 — perfect for developers who need to inspect or modify content structure. Shines in static site generators and build tools where AST access is required.
showdown is like a reliable classic car 🚗 — good for legacy support and simple use cases. Suitable for internal tools or projects prioritizing spec compatibility over modern features.
markdown is like a vintage model in a museum 🏛️ — do not use it for new projects. It lacks maintenance and security updates required for modern web development.
Final Thought: For most modern frontend applications, markdown-it offers the best balance of speed and features. If you need to transform content structure, choose remark. Avoid markdown entirely and use showdown only when legacy compatibility dictates it.
How to Choose: markdown vs markdown-it vs remark vs showdown
- markdown:
Avoid choosing
markdownfor new projects as it is no longer maintained and lacks modern security features. It may only be relevant if you are maintaining legacy codebases that already depend on it. For any new implementation, evaluate active alternatives likemarkdown-itorremarkinstead. Using this package introduces potential security risks and compatibility issues with modern tooling. - markdown-it:
Choose
markdown-itif you need a fast, highly extensible parser that outputs HTML directly. It is ideal for content-heavy sites like blogs or documentation where performance and plugin availability matter. The modular architecture allows you to enable only the features you need, keeping the bundle lean. It strikes a strong balance between ease of use and power for standard web rendering. - remark:
Choose
remarkif you need to manipulate the document structure before rendering, such as extracting headings or transforming content. It is perfect for static site generators or tools that require access to the abstract syntax tree. The unified ecosystem provides many plugins for linting, formatting, and converting to other formats beyond HTML. This approach offers maximum flexibility for complex build pipelines. - showdown:
Choose
showdownif you need close compatibility with the original Markdown specification or require a simple setup for legacy systems. It is suitable for basic text editing tools where advanced customization is not a priority. The API is straightforward, making it easy to integrate without a steep learning curve. However, be aware that it may lack the performance and security updates of newer libraries.
Popular Comparisons
README for markdown
markdown-js
Yet another markdown parser, this time for JavaScript. There's a few options that precede this project but they all treat markdown to HTML conversion as a single step process. You pass markdown in and get HTML out, end of story. We had some pretty particular views on how the process should actually look, which include:
-
producing well-formed HTML. This means that
emandstrongnesting is important, as is the ability to output as both HTML and XHTML -
having an intermediate representation to allow processing of parsed data (we in fact have two, both JsonML: a markdown tree and an HTML tree)
-
being easily extensible to add new dialects without having to rewrite the entire parsing mechanics
-
having a good test suite. The only test suites we could find tested massive blocks of input, and passing depended on outputting the HTML with exactly the same whitespace as the original implementation
Installation
Just the markdown library:
npm install markdown
Optionally, install md2html into your path
npm install -g markdown
Usage
### Node
The simple way to use it with node is:
var markdown = require( "markdown" ).markdown;
console.log( markdown.toHTML( "Hello *World*!" ) );
### Browser
It also works in a browser; here is a complete example:
<!DOCTYPE html>
<html>
<body>
<textarea id="text-input" oninput="this.editor.update()"
rows="6" cols="60">Type **Markdown** here.</textarea>
<div id="preview"> </div>
<script src="lib/markdown.js"></script>
<script>
function Editor(input, preview) {
this.update = function () {
preview.innerHTML = markdown.toHTML(input.value);
};
input.editor = this;
this.update();
}
var $ = function (id) { return document.getElementById(id); };
new Editor($("text-input"), $("preview"));
</script>
</body>
</html>
Command line
Assuming you've installed the md2html script (see Installation,
above), you can convert markdown to html:
# read from a file
md2html /path/to/doc.md > /path/to/doc.html
# or from stdin
echo 'Hello *World*!' | md2html
### More options
If you want more control check out the documentation in lib/markdown.js which details all the methods and parameters available (including examples!). One day we'll get the docs generated and hosted somewhere for nicer browsing.
Meanwhile, here's an example of using the multi-step processing to make wiki-style linking work by filling in missing link references:
var md = require( "markdown" ).markdown,
text = "[Markdown] is a simple text-based [markup language]\n" +
"created by [John Gruber]\n\n" +
"[John Gruber]: http://daringfireball.net";
// parse the markdown into a tree and grab the link references
var tree = md.parse( text ),
refs = tree[ 1 ].references;
// iterate through the tree finding link references
( function find_link_refs( jsonml ) {
if ( jsonml[ 0 ] === "link_ref" ) {
var ref = jsonml[ 1 ].ref;
// if there's no reference, define a wiki link
if ( !refs[ ref ] ) {
refs[ ref ] = {
href: "http://en.wikipedia.org/wiki/" + ref.replace(/\s+/, "_" )
};
}
}
else if ( Array.isArray( jsonml[ 1 ] ) ) {
jsonml[ 1 ].forEach( find_link_refs );
}
else if ( Array.isArray( jsonml[ 2 ] ) ) {
jsonml[ 2 ].forEach( find_link_refs );
}
} )( tree );
// convert the tree into html
var html = md.renderJsonML( md.toHTMLTree( tree ) );
console.log( html );
Intermediate Representation
Internally the process to convert a chunk of markdown into a chunk of HTML has three steps:
-
Parse the markdown into a JsonML tree. Any references found in the parsing are stored in the attribute hash of the root node under the key
references. -
Convert the markdown tree into an HTML tree. Rename any nodes that need it (
bulletlisttoulfor example) and lookup any references used by links or images. Remove the references attribute once done. -
Stringify the HTML tree being careful not to wreck whitespace where whitespace is important (surrounding inline elements for example).
Each step of this process can be called individually if you need to do
some processing or modification of the data at an intermediate stage.
For example, you may want to grab a list of all URLs linked to in the
document before rendering it to HTML which you could do by recursing
through the HTML tree looking for a nodes.
Running tests
To run the tests under node you will need tap installed (it's listed as a
devDependencies so npm install from the checkout should be enough), then do
$ npm test
Contributing
Do the usual github fork and pull request dance. Add yourself to the contributors section of package.json too if you want to.
## License
Released under the MIT license.
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.