showdown

What is showdown?

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.

What are showdown's main functionalities?

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

Other packages similar to showdown

marked

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

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

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.

README

---

Showdown is a Javascript Markdown to HTML converter, based on the original works by John Gruber. Showdown can be used client side (in the browser) or server side (with NodeJs).

Installation

Download tarball

You can download the latest release tarball directly from https://github.com/showdownjs/showdown/releases

Bower

bower install showdown

npm (server-side)

npm install showdown

Browser Compatibility

Showdown has been tested successfully with:

• Firefox 1.5 and 2.0
• Internet Explorer 6 and 7
• Safari 2.0.4
• Opera 8.54 and 9.10
• Netscape 8.1.2
• Konqueror 3.5.4

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.

Node compatibility

Showdown has been tested with node 0.8 and 0.10. However, it should work with previous versions, such as node 0.6.

Legacy version

If you're looking for showdown v<1.0.0, you can find it in the legacy branch.

Quick Example

Node

var showdown  = require('showdown'),
    converter = new showdown.Converter(),
    text      = '#hello, markdown!',
    html      = converter.makeHtml(text);

Browser

var converter = new showdown.Converter(),
    text      = '#hello, markdown!',
    html      = converter.makeHtml(text);

Output

Both examples should output...

<h1 id="hellomarkdown">hello, markdown!</h1>

Options

You can change some of showdown's default behavior through options.

Setting options

Options can be set:

Globally

Setting a "global" option affects all instances of showdown

showdown.setOption('optionKey', 'value');

Locally

Setting a "local" option only affects the specified Converter object. Local options can be set:

• through the constructor

  var converter = new showdown.Converter({optionKey: 'value');
  

• through the setOption() method

  var converter = new showdown.Converter();
  conveter.setOption('optionKey', 'value');
  

Getting an option

Showdown provides 2 methods (both local and global) to retrieve previous set options.

getOption()

// Global
var myOption = showdown.getOption('optionKey');

//Local
var myOption = conveter.getOption('optionKey');

getOptions()

// Global
var showdownGlobalOptions = showdown.getOptions();

//Local
var thisConverterSpecificOptions = conveter.getOptions();

Valid Options

• omitExtraWLInCodeBlocks: (boolean) Omits the trailing newline in a code block. Ex:

  This:

  <code><pre>var foo = 'bar';
  </pre></code>
  

  Becomes this:

  <code><pre>var foo = 'bar';</pre></code>
  

• prefixHeaderId: (string/boolean) Adds a prefix to the generated header ids. Passing a string will prefix that string to the header id. Setting to true will add a generic 'section' prefix.

Integration with AngularJS

ShowdownJS project also provides seamlessly integration with AngularJS via a "plugin". Please visit https://github.com/showdownjs/ngShowdown for more information.

Extensions

Showdown allows additional functionality to be loaded via extensions.

Client-side Extension Usage

<script src="showdown.js" />
<script src="twitter-extension.js" />

var converter = new showdown.Converter({ extensions: 'twitter' });

Server-side Extension Usage

var showdown    = require('showdown'),
    myExtension = require('myExtension'),
    converter = new showdown.Converter({ extensions: ['myExtension'] });

Tests

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.

Known Differences in Output

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
  ![image](http://w3.org/Icons/valid-xhtml10).
  

  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.

Creating Markdown Extensions

A showdown extension is simply a function which returns an array of extensions. Each single extension can be one of two types:

• Language Extension -- Language extensions are ones that that 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 Modifiers -- After showdown has run, and generated HTML, an output modifier would change that HTML. For example, say you wanted to change <div class="header"> to be <header>, that would be an output modifier.

Each extension can provide two combinations of interfaces for showdown.

Regex/Replace

Regex/replace style extensions are very similar to Javascript's 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: '@' }
  ];
}

Filter

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, '@');
    }}
  ];
}

Implementation Concerns

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;
}());

Testing Extensions

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 folder using the md/html format and they will automatically be run when tests are run.

Contributing

If you wish to contribute please read the following quick guide.

Want a Feature?

You can request a new feature by submitting an issue. If you would like to implement a new feature feel free to issue a Pull Request.

Pull requests (PRs)

PRs are awesome. However, before you submit your pull request consider the following guidelines:

• Search GitHub for an open or closed Pull Request that relates to your submission. You don't want to duplicate effort.

• When issuing PRs that change code, make your changes in a new git branch based on master:

  git checkout -b my-fix-branch master
  

• Documentation (i.e: README.md) changes can be made directly against master.

• Run the full test suite before submitting and make sure all tests pass (obviously =P).

• Try to follow our coding style rules. Breaking them prevents the PR to pass the tests.

• Refrain from fixing multiple issues in the same pull request. It's preferable to open multiple small PRs instead of one hard to review big one.

• If the PR introduces a new feature or fixes an issue, please add the appropriate test case.

• We use commit notes to generate the changelog. It's extremely helpful if your commit messages adhere to the AngularJS Git Commit Guidelines.

• If we suggest changes then:

  • Make the required updates.
  • Re-run the Angular test suite to ensure tests are still passing.
  • Rebase your branch and force push to your GitHub repository (this will update your Pull Request):

  git rebase master -i
  git push origin my-fix-branch -f
  

• After your pull request is merged, you can safely delete your branch.

If you have time to contribute to this project, we feel obliged that you get credit for it. These rules enable us to review your PR faster and will give you appropriate credit in your GitHub profile. We thank you in advance for your contribution!

Joining the team

We're looking for members to help maintaining Showdown. Please see this issue to express interest or comment on this note.

Credits

Full credit list at https://github.com/showdownjs/showdown/blob/master/CREDITS.md

Showdown is powered by:

Changelog

1.0.0 (2015-05-27)

Release Information

This is a major code refactor with some big changes such as:

• showdown.js file was split in several files, called sub-parsers. This should improve code maintainability.
• angular integration was removed from core and move to its own repository, similar to what was done with extensions
• A new extension registering system is on the "cooks" that should reduce errors when using extensions. The old mechanism is kept so old extensions should be compatible.

Bug Fixes

• extensions: support for old extension loading mechanism (95ed7c68)
• helpers: fix wrong function call 'escapeCharacters' due to old strayed code (18ba4e75)
• showdown.js:
  • fix showdown extension loader (a38c76d2), closes #50,#56, #104, #108, #109, #111, #118, #122
  • add unique id prefix and suffix to headers (c367a4b9, closes #81, #82)
• options.omitExtraWLInCodeBlocks: fix for options.omitExtraWLInCodeBlocks only applying in gitHub flavoured code b (e6f40e19)
• showdown: fix for options merging into globalOptions (ddd6011d, closes #153)

Features

• registerExtension(): new extension loading mechanism. Now extensions can be registered using this function. The system, however, is not final and will probably be changed until the final version([0fd10cb] (http://github.com/showdownjs/showdown/commit/0fd10cb))
• allowBlockIndents: indented inline block elements can now be parsed as markdown (f6326b84)
• omitExtraWLInCodeBlocks: add option to omit extra newline at the end of codeblocks (141e3f5)
• prefixHeaderId: add options to prefix header ids to prevent id clash (141e3f5)
• Converter.options: add getOption(), setOption() and getOptions() to Converter object (db6f79b0)

Breaking Changes

• 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