Markdown parser, done right. 100% CommonMark support, extensions, syntax plugins & high speed
https://markdown-it.github.io/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
444 lines
12 KiB
444 lines
12 KiB
/**
|
|
* class Renderer
|
|
*
|
|
* Generates HTML from parsed token stream. Each instance has independent
|
|
* copy of rules. Those can be rewritten with ease. Also, you can add new
|
|
* rules if you create plugin and adds new token types.
|
|
**/
|
|
'use strict';
|
|
|
|
|
|
var assign = require('./common/utils').assign;
|
|
var has = require('./common/utils').has;
|
|
var unescapeMd = require('./common/utils').unescapeMd;
|
|
var replaceEntities = require('./common/utils').replaceEntities;
|
|
var escapeHtml = require('./common/utils').escapeHtml;
|
|
|
|
|
|
////////////////////////////////////////////////////////////////////////////////
|
|
|
|
var rules = {};
|
|
|
|
|
|
|
|
rules.blockquote_open = function (/* tokens, idx, options, env */) {
|
|
return '<blockquote>\n';
|
|
};
|
|
rules.blockquote_close = function (/* tokens, idx, options, env */) {
|
|
return '</blockquote>\n';
|
|
};
|
|
|
|
|
|
rules.code = function (tokens, idx /*, options, env */) {
|
|
if (tokens[idx].block) {
|
|
return '<pre><code>' + escapeHtml(tokens[idx].content) + '</code></pre>\n';
|
|
}
|
|
|
|
return '<code>' + escapeHtml(tokens[idx].content) + '</code>';
|
|
};
|
|
|
|
|
|
rules.fence = function (tokens, idx, options, env, self) {
|
|
var token = tokens[idx];
|
|
var langClass = '';
|
|
var langPrefix = options.langPrefix;
|
|
var langName = '', fenceName;
|
|
var highlighted;
|
|
|
|
if (token.params) {
|
|
|
|
//
|
|
// ```foo bar
|
|
//
|
|
// Try custom renderer "foo" first. That will simplify overwrite
|
|
// for diagrams, latex, and any other fenced block with custom look
|
|
//
|
|
|
|
fenceName = token.params.split(/\s+/g)[0];
|
|
|
|
if (has(self.rules.fence_custom, fenceName)) {
|
|
return self.rules.fence_custom[fenceName](tokens, idx, options, env, self);
|
|
}
|
|
|
|
langName = escapeHtml(replaceEntities(unescapeMd(fenceName)));
|
|
langClass = ' class="' + langPrefix + langName + '"';
|
|
}
|
|
|
|
if (options.highlight) {
|
|
highlighted = options.highlight(token.content, langName) || escapeHtml(token.content);
|
|
} else {
|
|
highlighted = escapeHtml(token.content);
|
|
}
|
|
|
|
|
|
return '<pre><code' + langClass + '>'
|
|
+ highlighted
|
|
+ '</code></pre>\n';
|
|
};
|
|
|
|
rules.fence_custom = {};
|
|
|
|
rules.heading_open = function (tokens, idx /*, options, env */) {
|
|
return '<h' + tokens[idx].hLevel + '>';
|
|
};
|
|
rules.heading_close = function (tokens, idx /*, options, env */) {
|
|
return '</h' + tokens[idx].hLevel + '>\n';
|
|
};
|
|
|
|
|
|
rules.hr = function (tokens, idx, options /*, env */) {
|
|
return (options.xhtmlOut ? '<hr />\n' : '<hr>\n');
|
|
};
|
|
|
|
|
|
rules.bullet_list_open = function (/* tokens, idx, options, env */) {
|
|
return '<ul>\n';
|
|
};
|
|
rules.bullet_list_close = function (/* tokens, idx, options, env */) {
|
|
return '</ul>\n';
|
|
};
|
|
rules.list_item_open = function (tokens, idx /*, options, env */) {
|
|
var next = tokens[idx + 1];
|
|
if ((next.type === 'list_item_close') ||
|
|
(next.type === 'paragraph_open' && next.tight)) {
|
|
return '<li>';
|
|
}
|
|
return '<li>\n';
|
|
};
|
|
rules.list_item_close = function (/* tokens, idx, options, env */) {
|
|
return '</li>\n';
|
|
};
|
|
rules.ordered_list_open = function (tokens, idx /*, options, env */) {
|
|
if (tokens[idx].order > 1) {
|
|
return '<ol start="' + tokens[idx].order + '">\n';
|
|
}
|
|
return '<ol>\n';
|
|
};
|
|
rules.ordered_list_close = function (/* tokens, idx, options, env */) {
|
|
return '</ol>\n';
|
|
};
|
|
|
|
|
|
rules.paragraph_open = function (tokens, idx /*, options, env */) {
|
|
return tokens[idx].tight ? '' : '<p>';
|
|
};
|
|
rules.paragraph_close = function (tokens, idx /*, options, env */) {
|
|
// We have 2 cases of "hidden" paragraphs
|
|
//
|
|
// 1. In tight lists
|
|
// 2. When content was stripped (reference definition, for example)
|
|
//
|
|
if (tokens[idx].tight === true) {
|
|
if (!tokens[idx - 1].content) {
|
|
return '';
|
|
}
|
|
if (tokens[idx + 1].type === 'list_item_close') {
|
|
return '';
|
|
}
|
|
return '\n';
|
|
}
|
|
return '</p>\n';
|
|
};
|
|
|
|
|
|
rules.link_open = function (tokens, idx /*, options, env */) {
|
|
var title = tokens[idx].title ? (' title="' + escapeHtml(replaceEntities(tokens[idx].title)) + '"') : '';
|
|
return '<a href="' + escapeHtml(tokens[idx].href) + '"' + title + '>';
|
|
};
|
|
rules.link_close = function (/* tokens, idx, options, env */) {
|
|
return '</a>';
|
|
};
|
|
|
|
|
|
rules.image = function (tokens, idx, options, env, self) {
|
|
var src = ' src="' + escapeHtml(tokens[idx].src) + '"';
|
|
var title = tokens[idx].title ? (' title="' + escapeHtml(replaceEntities(tokens[idx].title)) + '"') : '';
|
|
var alt = ' alt="' + self.renderInlineAsText(tokens[idx].tokens, options, env) + '"';
|
|
var suffix = options.xhtmlOut ? ' /' : '';
|
|
return '<img' + src + alt + title + suffix + '>';
|
|
};
|
|
|
|
|
|
rules.table_open = function (/* tokens, idx, options, env */) {
|
|
return '<table>\n';
|
|
};
|
|
rules.table_close = function (/* tokens, idx, options, env */) {
|
|
return '</table>\n';
|
|
};
|
|
rules.thead_open = function (/* tokens, idx, options, env */) {
|
|
return '<thead>\n';
|
|
};
|
|
rules.thead_close = function (/* tokens, idx, options, env */) {
|
|
return '</thead>\n';
|
|
};
|
|
rules.tbody_open = function (/* tokens, idx, options, env */) {
|
|
return '<tbody>\n';
|
|
};
|
|
rules.tbody_close = function (/* tokens, idx, options, env */) {
|
|
return '</tbody>\n';
|
|
};
|
|
rules.tr_open = function (/* tokens, idx, options, env */) {
|
|
return '<tr>';
|
|
};
|
|
rules.tr_close = function (/* tokens, idx, options, env */) {
|
|
return '</tr>\n';
|
|
};
|
|
rules.th_open = function (tokens, idx /*, options, env */) {
|
|
if (tokens[idx].align) {
|
|
return '<th style="text-align:' + tokens[idx].align + '">';
|
|
}
|
|
return '<th>';
|
|
};
|
|
rules.th_close = function (/* tokens, idx, options, env */) {
|
|
return '</th>';
|
|
};
|
|
rules.td_open = function (tokens, idx /*, options, env */) {
|
|
if (tokens[idx].align) {
|
|
return '<td style="text-align:' + tokens[idx].align + '">';
|
|
}
|
|
return '<td>';
|
|
};
|
|
rules.td_close = function (/* tokens, idx, options, env */) {
|
|
return '</td>';
|
|
};
|
|
|
|
|
|
rules.strong_open = function (/* tokens, idx, options, env */) {
|
|
return '<strong>';
|
|
};
|
|
rules.strong_close = function (/* tokens, idx, options, env */) {
|
|
return '</strong>';
|
|
};
|
|
rules.em_open = function (/* tokens, idx, options, env */) {
|
|
return '<em>';
|
|
};
|
|
rules.em_close = function (/* tokens, idx, options, env */) {
|
|
return '</em>';
|
|
};
|
|
|
|
|
|
rules.del_open = function (/* tokens, idx, options, env */) {
|
|
return '<del>';
|
|
};
|
|
rules.del_close = function (/* tokens, idx, options, env */) {
|
|
return '</del>';
|
|
};
|
|
|
|
|
|
rules.ins_open = function (/* tokens, idx, options, env */) {
|
|
return '<ins>';
|
|
};
|
|
rules.ins_close = function (/* tokens, idx, options, env */) {
|
|
return '</ins>';
|
|
};
|
|
|
|
|
|
rules.mark_open = function (/* tokens, idx, options, env */) {
|
|
return '<mark>';
|
|
};
|
|
rules.mark_close = function (/* tokens, idx, options, env */) {
|
|
return '</mark>';
|
|
};
|
|
|
|
|
|
rules.sub = function (tokens, idx /*, options, env */) {
|
|
return '<sub>' + escapeHtml(tokens[idx].content) + '</sub>';
|
|
};
|
|
rules.sup = function (tokens, idx /*, options, env */) {
|
|
return '<sup>' + escapeHtml(tokens[idx].content) + '</sup>';
|
|
};
|
|
|
|
|
|
rules.hardbreak = function (tokens, idx, options /*, env */) {
|
|
return options.xhtmlOut ? '<br />\n' : '<br>\n';
|
|
};
|
|
rules.softbreak = function (tokens, idx, options /*, env */) {
|
|
return options.breaks ? (options.xhtmlOut ? '<br />\n' : '<br>\n') : '\n';
|
|
};
|
|
|
|
|
|
rules.text = function (tokens, idx /*, options, env */) {
|
|
return escapeHtml(tokens[idx].content);
|
|
};
|
|
|
|
|
|
rules.htmlblock = function (tokens, idx /*, options, env */) {
|
|
return tokens[idx].content;
|
|
};
|
|
rules.htmltag = function (tokens, idx /*, options, env */) {
|
|
return tokens[idx].content;
|
|
};
|
|
|
|
|
|
rules.abbr_open = function (tokens, idx /*, options, env */) {
|
|
return '<abbr title="' + escapeHtml(replaceEntities(tokens[idx].title)) + '">';
|
|
};
|
|
rules.abbr_close = function (/* tokens, idx, options, env */) {
|
|
return '</abbr>';
|
|
};
|
|
|
|
|
|
rules.footnote_ref = function (tokens, idx) {
|
|
var n = Number(tokens[idx].id + 1).toString();
|
|
var id = 'fnref' + n;
|
|
if (tokens[idx].subId > 0) {
|
|
id += ':' + tokens[idx].subId;
|
|
}
|
|
return '<sup class="footnote-ref"><a href="#fn' + n + '" id="' + id + '">[' + n + ']</a></sup>';
|
|
};
|
|
rules.footnote_block_open = function (tokens, idx, options) {
|
|
return (options.xhtmlOut ? '<hr class="footnotes-sep" />\n' : '<hr class="footnotes-sep">\n') +
|
|
'<section class="footnotes">\n' +
|
|
'<ol class="footnotes-list">\n';
|
|
};
|
|
rules.footnote_block_close = function () {
|
|
return '</ol>\n</section>\n';
|
|
};
|
|
rules.footnote_open = function (tokens, idx) {
|
|
var id = Number(tokens[idx].id + 1).toString();
|
|
return '<li id="fn' + id + '" class="footnote-item">';
|
|
};
|
|
rules.footnote_close = function () {
|
|
return '</li>\n';
|
|
};
|
|
rules.footnote_anchor = function (tokens, idx) {
|
|
var n = Number(tokens[idx].id + 1).toString();
|
|
var id = 'fnref' + n;
|
|
if (tokens[idx].subId > 0) {
|
|
id += ':' + tokens[idx].subId;
|
|
}
|
|
return ' <a href="#' + id + '" class="footnote-backref">\u21a9</a>'; /* ↩ */
|
|
};
|
|
|
|
|
|
rules.dl_open = function() {
|
|
return '<dl>\n';
|
|
};
|
|
rules.dt_open = function() {
|
|
return '<dt>';
|
|
};
|
|
rules.dd_open = function() {
|
|
return '<dd>';
|
|
};
|
|
rules.dl_close = function() {
|
|
return '</dl>\n';
|
|
};
|
|
rules.dt_close = function() {
|
|
return '</dt>\n';
|
|
};
|
|
rules.dd_close = function() {
|
|
return '</dd>\n';
|
|
};
|
|
|
|
|
|
/**
|
|
* new Renderer()
|
|
*
|
|
* Creates new [[Renderer]] instance and fill [[Renderer#rules]] with defaults.
|
|
**/
|
|
function Renderer() {
|
|
|
|
/**
|
|
* Renderer#rules -> Object
|
|
*
|
|
* Contains render rules for tokens. Can be updated and extended.
|
|
*
|
|
* ##### Example
|
|
*
|
|
* ```javascript
|
|
* var md = require('markdown-it')();
|
|
*
|
|
* md.renderer.rules.strong_open = function () { return '<b>'; };
|
|
* md.renderer.rules.strong_close = function () { return '</b>'; };
|
|
*
|
|
* var result = md.renderInline(...);
|
|
* ```
|
|
*
|
|
* Each rule is called as independed static function with fixed signature:
|
|
*
|
|
* ```javascript
|
|
* function my_token_render(tokens, idx, options, env, self) {
|
|
* // ...
|
|
* return renderedHTML;
|
|
* }
|
|
* ```
|
|
*
|
|
* See [source code](https://github.com/markdown-it/markdown-it/blob/master/lib/renderer.js)
|
|
* for more details and examples.
|
|
**/
|
|
this.rules = assign({}, rules);
|
|
}
|
|
|
|
|
|
/**
|
|
* Renderer.renderInline(tokens, options, env) -> String
|
|
* - tokens (Array): list on block tokens to renter
|
|
* - options (Object): params of parser instance
|
|
* - env (Object): additional data from parsed input (references, for example)
|
|
*
|
|
* The same as [[Renderer.render]], but for single token of `inline` type.
|
|
**/
|
|
Renderer.prototype.renderInline = function (tokens, options, env) {
|
|
var result = '',
|
|
_rules = this.rules;
|
|
|
|
for (var i = 0, len = tokens.length; i < len; i++) {
|
|
result += _rules[tokens[i].type](tokens, i, options, env, this);
|
|
}
|
|
|
|
return result;
|
|
};
|
|
|
|
|
|
/** internal
|
|
* Renderer.renderInlineAsText(tokens, options, env) -> String
|
|
* - tokens (Array): list on block tokens to renter
|
|
* - options (Object): params of parser instance
|
|
* - env (Object): additional data from parsed input (references, for example)
|
|
*
|
|
* Special kludge for image `alt` attributes to conform CommonMark spec.
|
|
* Don't try to use it! Spec requires to show `alt` content with stripped markup,
|
|
* instead of simple escaping.
|
|
**/
|
|
Renderer.prototype.renderInlineAsText = function (tokens, options, env) {
|
|
var result = '',
|
|
_rules = this.rules;
|
|
|
|
for (var i = 0, len = tokens.length; i < len; i++) {
|
|
if (tokens[i].type === 'text') {
|
|
result += _rules.text(tokens, i, options, env, this);
|
|
} else if (tokens[i].type === 'image') {
|
|
result += this.renderInlineAsText(tokens[i].tokens, options, env);
|
|
}
|
|
}
|
|
|
|
return result;
|
|
};
|
|
|
|
|
|
/**
|
|
* Renderer.render(tokens, options, env) -> String
|
|
* - tokens (Array): list on block tokens to renter
|
|
* - options (Object): params of parser instance
|
|
* - env (Object): additional data from parsed input (references, for example)
|
|
*
|
|
* Takes token stream and generates HTML. Probably, you will never need to call
|
|
* this method directly.
|
|
**/
|
|
Renderer.prototype.render = function (tokens, options, env) {
|
|
var i, len,
|
|
result = '',
|
|
_rules = this.rules;
|
|
|
|
for (i = 0, len = tokens.length; i < len; i++) {
|
|
if (tokens[i].type === 'inline') {
|
|
result += this.renderInline(tokens[i].children, options, env);
|
|
} else {
|
|
result += _rules[tokens[i].type](tokens, i, options, env, this);
|
|
}
|
|
}
|
|
|
|
return result;
|
|
};
|
|
|
|
module.exports = Renderer;
|
|
|