remarkable

What is remarkable?

The 'remarkable' npm package is a powerful markdown parser that allows you to convert markdown text into HTML. It is highly configurable and supports a wide range of markdown features, making it suitable for various use cases such as rendering markdown content on websites, converting markdown files to HTML, and more.

What are remarkable's main functionalities?

Basic Markdown to HTML Conversion

This feature allows you to convert basic markdown text into HTML. The code sample demonstrates how to convert a markdown heading into HTML.

const Remarkable = require('remarkable');
const md = new Remarkable();
const html = md.render('# Hello, world!');
console.log(html);

Custom Syntax Highlighting

This feature allows you to add custom syntax highlighting to code blocks in your markdown. The code sample demonstrates how to use the 'highlight.js' library to highlight JavaScript code within a markdown code block.

const Remarkable = require('remarkable');
const hljs = require('highlight.js');
const md = new Remarkable({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value;
      } catch (__) {}
    }
    return ''; // use external default escaping
  }
});
const html = md.render('```js\nconsole.log("Hello, world!");\n```');
console.log(html);

Customizing Markdown Rendering

This feature allows you to customize various aspects of markdown rendering. The code sample demonstrates how to enable HTML tags, convert newlines to <br> tags, and automatically convert URLs to links.

const Remarkable = require('remarkable');
const md = new Remarkable({
  html: true, // Enable HTML tags in source
  xhtmlOut: true, // Use '/' to close single tags (<br />)
  breaks: true, // Convert '\n' in paragraphs into <br>
  langPrefix: 'language-', // CSS language prefix for fenced blocks
  linkify: true, // Autoconvert URL-like text to links
  typographer: true // Enable smartypants and other sweet transforms
});
const html = md.render('# Hello, world!\nThis is a [link](http://example.com).');
console.log(html);

Other packages similar to remarkable

marked

The 'marked' package is another popular markdown parser that is known for its speed and flexibility. It offers similar functionality to 'remarkable' but is often preferred for its performance and ease of use.

markdown-it

The 'markdown-it' package is a highly extensible markdown parser that supports plugins and a wide range of markdown features. It is similar to 'remarkable' in terms of configurability and feature set, but it also offers additional plugins for extended functionality.

showdown

The 'showdown' package is a markdown to HTML converter that is known for its simplicity and ease of use. It provides a straightforward API for converting markdown to HTML and is often used in projects where simplicity is a priority.

README

remarkable

Markdown parser done right. Fast and easy to extend.

Live demo

• Configurable syntax! You can add new rules and even replace existing ones.
• Implements CommonMark spec + extentions (strikethrough, tables, URL autolinking, typographer).
• Very high speed.

Install

node.js:

npm install remarkable --save

bower:

bower install remarkable --save

CDNs for browser: jsDeliver

Usage

var Remarkable = require('remarkable');

// This values are default
var md = new Remarkable({
  html:         false,        // Enable html tags in source
  xhtmlOut:     false,        // Use '/' to close single tags (<br />)
  breaks:       false,        // Convert '\n' in paragraphs into <br>
  langPrefix:   'language-',  // CSS language prefix for fenced blocks
  linkify:      false,        // Autoconvert url-like texts to links
  typographer:  false,        // Enable smartypants and other sweet transforms

  // Highlighter function. Should return escaped html,
  // or '' if input not changed
  highlight: function (/*str, , lang*/) { return ''; }
});

console.log(md.render('# Remarkable rulezz!'));
// => <h1>Remarkable rulezz!</h1>

You can define options via set method:

var Remarkable = require('remarkable');
var md = new Remarkable();

md.set({
  html: false,
  breaks: true
});

Note. To acheive best performance, don't modify the Remarkable instance on the fly. If you need several configurations - create multiple instances and initialise each appropriately.

You can also reset parser to strict CommonMark mode:

var Remarkable = require('remarkable');
var md = new Remarkable('commonmark');

Highligh fenced blocks

To highlight content of fenced block, assing function to highlight option:

var Remarkable = require('remarkable');
var hljs       = require('highlight.js') // https://highlightjs.org/

// These values are default
var md = new Remarkable({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value;
      } catch (__) {}
    }

    try {
      return hljs.highlightAuto(str).value;
    } catch (__) {}

    return ''; // use external default escaping
  }
});

Typographer

Though full-weight typograpic replacements are language specific, remarkable provides the most common and universal case coverage:

var Remarkable = require('remarkable');
var md = new Remarkable({ typographer: true });

// These values are default
md.typographer.set({
  singleQuotes: '‘’', // set empty to disable
  doubleQuotes: '“”', // set '«»' for russian, '„“' for deutch, empty to disable
  copyright:    true, // (c) (C) → ©
  trademark:    true, // (tm) (TM) → ™
  registered:   true, // (r) (R) → ®
  plusminus:    true, // +- → ±
  paragraph:    true, // (p) (P) -> §
  ellipsis:     true, // ... → … (also ?.... → ?.., !.... → !..)
  dupes:        true, // ???????? → ???, !!!!! → !!!, `,,` → `,`
  dashes:       true  // -- → –, --- → —
})

Of course, you can add your own rules or replace default ones with something more advanced, specific for your language.

More extras

These extensions are enabled by default:

• Tables (GFM)
• <del> (GFM strikethrough) - ~~deleted text~~

References / Thanks

Big thanks to John MacFarlane for his work on the CommonMark spec and reference implementations. His work saved us a lot of time during this project's development.

Links:

1. https://github.com/jgm/stmd - reference CommonMark implementations in C & JS, also contains latest spec & online demo.
2. http://talk.commonmark.org - CommonMark forum, good place to collaborate developpers efforts.

Development / Modification

Parser consists of several responsibilities chains, filled with rules. You can reconfigure anyone as you wish. Render also can be modified and extended. See source code to understand details. Pay attention to this properties:

Remarkable.block
Remarkable.block.ruler
Remarkable.inline
Remarkable.inline.ruler
Remarkable.typographer
Remarkable.typographer.ruler
Remarkable.linkifier
Remarkable.linkifier.ruler
Remarkable.renderer
Remarkable.renderer.rules

To prettify plugins init, Remarked has .use() helper for curried calls:

var md = new Remarkable();

md.use(plugin1)
  .use(plugin2, opts)
  .use(plugin3);

Authors

• Jon Schlinkert github/jonschlinkert
• Alex Kocharin github/rlidwka
• Vitaly Puzrin github/puzrin

License

MIT