|
|
|
# markdown-it
|
|
|
|
|
|
|
|
## Install
|
|
|
|
|
|
|
|
**node.js**:
|
|
|
|
|
|
|
|
```bash
|
|
|
|
npm install markdown-it
|
|
|
|
```
|
|
|
|
|
|
|
|
**browser (CDN):**
|
|
|
|
|
|
|
|
- [jsDeliver CDN](http://www.jsdelivr.com/#!markdown-it "jsDelivr CDN")
|
|
|
|
- [cdnjs.com CDN](https://cdnjs.com/libraries/markdown-it "cdnjs.com")
|
|
|
|
|
|
|
|
|
|
|
|
## Usage examples
|
|
|
|
|
|
|
|
See also:
|
|
|
|
|
|
|
|
- [Development info](https://github.com/markdown-it/markdown-it/tree/master/docs) -
|
|
|
|
for plugins writers.
|
|
|
|
|
|
|
|
|
|
|
|
### Simple
|
|
|
|
|
|
|
|
```js
|
|
|
|
// node.js
|
|
|
|
// can use `require('markdown-it')` for CJS
|
|
|
|
import markdownit from 'markdown-it'
|
|
|
|
const md = markdownit()
|
|
|
|
const result = md.render('# markdown-it rulezz!');
|
|
|
|
|
|
|
|
// browser with UMD build, added to "window" on script load
|
|
|
|
// Note, there is no dash in "markdownit".
|
|
|
|
const md = window.markdownit();
|
|
|
|
const result = md.render('# markdown-it rulezz!');
|
|
|
|
```
|
|
|
|
|
|
|
|
Single line rendering, without paragraph wrap:
|
|
|
|
|
|
|
|
```js
|
|
|
|
import markdownit from 'markdown-it'
|
|
|
|
const md = markdownit()
|
|
|
|
const result = md.renderInline('__markdown-it__ rulezz!');
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### Init with presets and options
|
|
|
|
|
|
|
|
(*) presets define combinations of active rules and options. Can be
|
|
|
|
`"commonmark"`, `"zero"` or `"default"` (if skipped). See
|
|
|
|
[API docs](https://markdown-it.github.io/markdown-it/#MarkdownIt.new) for more details.
|
|
|
|
|
|
|
|
```js
|
|
|
|
import markdownit from 'markdown-it'
|
|
|
|
|
|
|
|
// commonmark mode
|
|
|
|
const md = markdownit('commonmark')
|
|
|
|
|
|
|
|
// default mode
|
|
|
|
const md = markdownit()
|
|
|
|
|
|
|
|
// enable everything
|
|
|
|
const md = markdownit({
|
|
|
|
html: true,
|
|
|
|
linkify: true,
|
|
|
|
typographer: true
|
|
|
|
})
|
|
|
|
|
|
|
|
// full options list (defaults)
|
|
|
|
const md = markdownit({
|
|
|
|
// Enable HTML tags in source
|
|
|
|
html: false,
|
|
|
|
|
|
|
|
// Use '/' to close single tags (<br />).
|
|
|
|
// This is only for full CommonMark compatibility.
|
|
|
|
xhtmlOut: false,
|
|
|
|
|
|
|
|
// Convert '\n' in paragraphs into <br>
|
|
|
|
breaks: false,
|
|
|
|
|
|
|
|
// CSS language prefix for fenced blocks. Can be
|
|
|
|
// useful for external highlighters.
|
|
|
|
langPrefix: 'language-',
|
|
|
|
|
|
|
|
// Autoconvert URL-like text to links
|
|
|
|
linkify: false,
|
|
|
|
|
|
|
|
// Enable some language-neutral replacement + quotes beautification
|
|
|
|
// For the full list of replacements, see https://github.com/markdown-it/markdown-it/blob/master/lib/rules_core/replacements.js
|
|
|
|
typographer: false,
|
|
|
|
|
|
|
|
// Double + single quotes replacement pairs, when typographer enabled,
|
|
|
|
// and smartquotes on. Could be either a String or an Array.
|
|
|
|
//
|
|
|
|
// For example, you can use '«»„“' for Russian, '„“‚‘' for German,
|
|
|
|
// and ['«\xA0', '\xA0»', '‹\xA0', '\xA0›'] for French (including nbsp).
|
|
|
|
quotes: '“”‘’',
|
|
|
|
|
|
|
|
// Highlighter function. Should return escaped HTML,
|
|
|
|
// or '' if the source string is not changed and should be escaped externally.
|
|
|
|
// If result starts with <pre... internal wrapper is skipped.
|
|
|
|
highlight: function (/*str, lang*/) { return ''; }
|
|
|
|
});
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### Plugins load
|
|
|
|
|
|
|
|
```js
|
|
|
|
import markdownit from 'markdown-it'
|
|
|
|
|
|
|
|
const md = markdownit
|
|
|
|
.use(plugin1)
|
|
|
|
.use(plugin2, opts, ...)
|
|
|
|
.use(plugin3);
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### Syntax highlighting
|
|
|
|
|
|
|
|
Apply syntax highlighting to fenced code blocks with the `highlight` option:
|
|
|
|
|
|
|
|
```js
|
|
|
|
import markdownit from 'markdown-it'
|
|
|
|
import hljs from 'highlight.js' // https://highlightjs.org
|
|
|
|
|
|
|
|
// Actual default values
|
|
|
|
const md = markdownit({
|
|
|
|
highlight: function (str, lang) {
|
|
|
|
if (lang && hljs.getLanguage(lang)) {
|
|
|
|
try {
|
|
|
|
return hljs.highlight(str, { language: lang }).value;
|
|
|
|
} catch (__) {}
|
|
|
|
}
|
|
|
|
|
|
|
|
return ''; // use external default escaping
|
|
|
|
}
|
|
|
|
});
|
|
|
|
```
|
|
|
|
|
|
|
|
Or with full wrapper override (if you need assign class to `<pre>` or `<code>`):
|
|
|
|
|
|
|
|
```js
|
|
|
|
import markdownit from 'markdown-it'
|
|
|
|
import hljs from 'highlight.js' // https://highlightjs.org
|
|
|
|
|
|
|
|
// Actual default values
|
|
|
|
const md = markdownit({
|
|
|
|
highlight: function (str, lang) {
|
|
|
|
if (lang && hljs.getLanguage(lang)) {
|
|
|
|
try {
|
|
|
|
return '<pre><code class="hljs">' +
|
|
|
|
hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
|
|
|
|
'</code></pre>';
|
|
|
|
} catch (__) {}
|
|
|
|
}
|
|
|
|
|
|
|
|
return '<pre><code class="hljs">' + md.utils.escapeHtml(str) + '</code></pre>';
|
|
|
|
}
|
|
|
|
});
|
|
|
|
```
|
|
|
|
|
|
|
|
### Linkify
|
|
|
|
|
|
|
|
`linkify: true` uses [linkify-it](https://github.com/markdown-it/linkify-it). To
|
|
|
|
configure linkify-it, access the linkify instance through `md.linkify`:
|
|
|
|
|
|
|
|
```js
|
|
|
|
md.linkify.set({ fuzzyEmail: false }); // disables converting email to link
|
|
|
|
```
|
|
|
|
|
|
|
|
## Syntax extensions
|
|
|
|
|
|
|
|
Embedded (enabled by default):
|
|
|
|
|
|
|
|
- [Tables](https://help.github.com/articles/organizing-information-with-tables/) (GFM)
|
|
|
|
- [Strikethrough](https://help.github.com/articles/basic-writing-and-formatting-syntax/#styling-text) (GFM)
|
|
|
|
|
|
|
|
Via plugins:
|
|
|
|
|
|
|
|
- [subscript](https://github.com/markdown-it/markdown-it-sub)
|
|
|
|
- [superscript](https://github.com/markdown-it/markdown-it-sup)
|
|
|
|
- [footnote](https://github.com/markdown-it/markdown-it-footnote)
|
|
|
|
- [definition list](https://github.com/markdown-it/markdown-it-deflist)
|
|
|
|
- [abbreviation](https://github.com/markdown-it/markdown-it-abbr)
|
|
|
|
- [emoji](https://github.com/markdown-it/markdown-it-emoji)
|
|
|
|
- [custom container](https://github.com/markdown-it/markdown-it-container)
|
|
|
|
- [insert](https://github.com/markdown-it/markdown-it-ins)
|
|
|
|
- [mark](https://github.com/markdown-it/markdown-it-mark)
|
|
|
|
- ... and [others](https://www.npmjs.org/browse/keyword/markdown-it-plugin)
|
|
|
|
|
|
|
|
|
|
|
|
### Manage rules
|
|
|
|
|
|
|
|
By default all rules are enabled, but can be restricted by options. On plugin
|
|
|
|
load all its rules are enabled automatically.
|
|
|
|
|
|
|
|
```js
|
|
|
|
import markdownit from 'markdown-it'
|
|
|
|
|
|
|
|
// Activate/deactivate rules, with currying
|
|
|
|
const md = markdownit()
|
|
|
|
.disable(['link', 'image'])
|
|
|
|
.enable(['link'])
|
|
|
|
.enable('image');
|
|
|
|
|
|
|
|
// Enable everything
|
|
|
|
const md = markdownit({
|
|
|
|
html: true,
|
|
|
|
linkify: true,
|
|
|
|
typographer: true,
|
|
|
|
});
|
|
|
|
```
|