Showdown is a JavaScript Markdown to HTML converter, based on the original works by John Gruber. It allows you to easily convert Markdown text into HTML, making it useful for web applications, documentation, and other text processing tasks.
Convert Markdown to HTML
This feature allows you to convert Markdown text into HTML. The code sample demonstrates how to create a new Showdown converter instance and use it to convert a Markdown string into HTML.
const showdown = require('showdown');
const converter = new showdown.Converter();
const markdown = '# Hello, Showdown!';
const html = converter.makeHtml(markdown);
console.log(html);Customize Output
Showdown allows you to customize the output by enabling or disabling various options. The code sample shows how to enable the 'tables' and 'strikethrough' options to enhance the Markdown to HTML conversion.
const showdown = require('showdown');
const converter = new showdown.Converter({ tables: true, strikethrough: true });
const markdown = '~~Strikethrough~~ and a table:
| h1 | h2 |
| --- | --- |
| cell1 | cell2 |';
const html = converter.makeHtml(markdown);
console.log(html);Extension Support
Showdown supports extensions, allowing you to add custom functionality to the conversion process. The code sample demonstrates how to create a simple extension that converts '@text' into bold HTML text.
const showdown = require('showdown');
showdown.extension('myextension', function() {
return [{
type: 'lang',
regex: /@( ext)/g,
replace: '<strong>$1</strong>'
}];
});
const converter = new showdown.Converter({ extensions: ['myextension'] });
const markdown = 'This is @text.';
const html = converter.makeHtml(markdown);
console.log(html);Marked is a fast, lightweight Markdown parser and compiler. It is designed for speed and offers a high level of customization. Compared to Showdown, Marked is often preferred for its performance and flexibility in handling large Markdown files.
Markdown-it is a powerful Markdown parser that offers a wide range of features, including plugins and high-speed performance. It is known for its extensibility and ability to handle complex Markdown syntax. Markdown-it provides more advanced features and customization options compared to Showdown.
Remark is a Markdown processor powered by plugins. It is part of the unified collective and offers a highly modular and extensible approach to Markdown processing. Remark is suitable for users who need a highly customizable and plugin-based solution, whereas Showdown is more straightforward and easier to use out of the box.
A JavaScript port of Markdown
Showdown is now maintained by the showdownjs organization on Github.
The organization needs members to maintain Showdown.
Please see this issue to express interest or comment on this note.
Showdown Copyright (c) 2007 John Fraser. http://www.attacklab.net/
Original Markdown Copyright (c) 2004-2005 John Gruber http://daringfireball.net/projects/markdown/
Redistributable under a BSD-style open source license. See license.txt for more information.
var Showdown = require('showdown');
var converter = new Showdown.converter();
converter.makeHtml('#hello markdown!');
// <h1 id="hellomarkdown">hello, markdown</h1>
Developers can use Showdown to:
Add in-browser preview to existing Markdown apps
Showdown's output is (almost always) identical to markdown.pl's, so the server can reproduce exactly the output that the user saw. (See below for exceptions.)
Add Markdown input to programs that don't support it
Any app that accepts HTML input can now be made to speak
Markdown by modifying the input pages's HTML. If your
application lets users edit documents again later,
then they won't have access to the original Markdown
text. But this should be good enough for many
uses -- and you can do it with just a two-line
onsubmit function!
Add Markdown input to closed-source web apps
You can write bookmarklets or userscripts to extend any standard textarea on the web so that it accepts Markdown instead of HTML. With a little more hacking, the same can probably be done with many rich edit controls.
Build new web apps from scratch
A Showdown front-end can send back text in Markdown, HTML or both, so you can trade bandwidth for server load to reduce your cost of operation. If your app requires JavaScript, you won't need to do any Markdown processing on the server at all. (For most uses, you'll still need to sanitize the HTML before showing it to other users -- but you'd need to do that anyway if you're allowing raw HTML in your Markdown.)
Showdown has been tested successfully with:
In theory, Showdown will work in any browser that supports ECMA 262 3rd Edition (JavaScript 1.5). The converter itself might even work in things that aren't web browsers, like Acrobat. No promises.
Showdown allows additional functionality to be loaded via extensions.
<script src="src/showdown.js" />
<script src="src/extensions/twitter.js" />
var converter = new Showdown.converter({ extensions: ['twitter'] });
// Using a bundled extension
var Showdown = require('showdown');
var converter = new Showdown.converter({ extensions: ['twitter'] });
// Using a custom extension
var mine = require('./custom-extensions/mine');
var converter = new Showdown.converter({ extensions: ['twitter', mine] });
In most cases, Showdown's output is identical to that of Perl Markdown v1.0.2b7. What follows is a list of all known deviations. Please file an issue if you find more.
This release uses the HTML parser from Markdown 1.0.2b2,
which means it fails Inline HTML (Advanced).text from
the Markdown test suite:
<div>
<div>
unindented == broken
</div>
</div>
Showdown doesn't support the markdown="1" attribute:
<div markdown="1">
Markdown does *not* work in here.
</div>
This is half laziness on my part and half stubbornness. Markdown is smart enough to process the contents of span- level tags without screwing things up; shouldn't it be able to do the same inside block elements? Let's find a way to make markdown="1" the default.
You can only nest square brackets in link titles to a depth of two levels:
[[fine]](http://www.attacklab.net/)
[[[broken]]](http://www.attacklab.net/)
If you need more, you can escape them with backslashes.
When sublists have paragraphs, Showdown produces equivalent HTML with a slightly different arrangement of newlines:
+ item
- subitem
The HTML has a superfluous newline before this
paragraph.
- subitem
The HTML here is unchanged.
- subitem
The HTML is missing a newline after this
list subitem.
Markdown.pl creates empty title attributes for inline-style images:
Here's an empty title on an inline-style
.
I tried to replicate this to clean up my diffs during testing, but I went too far: now Showdown also makes empty titles for reference-style images:
Showdown makes an empty title for
reference-style ![images][] too.
[images]: http://w3.org/Icons/valid-xhtml10
With crazy input, Markdown will mistakenly put
<strong> or <em> tags in URLs:
<a href="<*Markdown adds em tags in here*>">
improbable URL
</a>
Showdown won't. But still, don't do that.
A suite of tests is available which require node.js. Once node is installed, run the following command from the project root to install the development dependencies:
npm install --dev
Once installed the tests can be run from the project root using:
npm test
New test cases can easily be added. Create a markdown file (ending in .md) which contains the markdown to test. Create a .html file of the exact same name. It will automatically be tested when the tests are executed with mocha.
A showdown extension is simply a function which returns an array of language extensions and/or output modifiers:
lang type, and add new markdown syntax to showdown. For example, say you wanted ^^youtube http://www.youtube.com/watch?v=oHg5SJYRHA0 to automatically render as an embedded YouTube video, that would be a language extension.output type. After showdown has generated HTML, an output modifier can make changes to the generated HTML. For example, if you wanted to change <div class="header"> to be <header>, you could implement an output modifier.Each showdown extension can provide language extensions and/or output modifiers.
Regex/replace style extensions are very similar to javascripts string.replace function. Two properties are given, regex and replace. regex is a string and replace can be either a string or a function. If replace is a string, it can use the $1 syntax for group substitution, exactly as if it were making use of string.replace (internally it does this actually); The value of regex is assumed to be a global replacement.
Example:
var demo = function(converter) {
return [
// Replace escaped @ symbols
{ type: 'lang', regex: '\\@', replace: '@' }
];
}
Alternately, if you'd just like to do everything yourself, you can specify a filter which is a callback with a single input parameter, text (the current source text within the showdown engine).
Example:
var demo = function(converter) {
return [
// Replace escaped @ symbols
{ type: 'lang', filter: function(text) {
return text.replace(/\\@/g, '@');
}}
];
}
One bit which should be taken into account is maintaining both client-side and server-side compatibility. This can be achieved with a few lines of boilerplate code. First, to prevent polluting the global scope for client-side code, the extension definition should be wrapped in a self-executing function.
(function(){
// Your extension here
}());
Second, client-side extensions should add a property onto Showdown.extensions which matches the name of the file. As an example, a file named demo.js should then add Showdown.extensions.demo. Server-side extensions can simply export themselves.
(function(){
var demo = function(converter) {
// ... extension code here ...
};
// Client-side export
if (typeof window !== 'undefined' && window.Showdown && window.Showdown.extensions) { window.Showdown.extensions.demo = demo; }
// Server-side export
if (typeof module !== 'undefined') module.exports = demo;
}());
The showdown test runner is setup to automatically test cases for extensions. To add test cases for an extension, create a new folder under ./test/extensions which matches the name of the .js file in ./src/extensions. Place any test cases into the filder using the md/html format and they will automatically be run when tests are run.
1.0.0 (2015-05-27)
This is a major code refactor with some big changes such as:
NAMESPACE: showdown's namespace changed.
To migrate your code you should update all references to Showdown with showdown.
Converter: converter reference changed from converter to Converter.
To migrate you should update all references to Showdown.converter with showdown.Converter
angular: angular integration was removed from core and now lives in it's own repository.
If you're using angular integration, you should install ng-showdown. Ex: bower install ng-showdown
extensions: showdown extensions were removed from core package and now live in their own repository. See the project's github page for available extensions
FAQs
A Markdown to HTML converter written in Javascript
The npm package showdown receives a total of 460,461 weekly downloads. As such, showdown popularity was classified as popular.
We found that showdown demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.