markdown-it源码分析6-Renderer

做者：嵇智

Renderer

在全部 Parser 编译生成完 tokens 的时候，就传给 Renderer.render 方法了。咱们来看下 Renderer 的定义。它位于 lib/renderer.js。

default_rules.code_inline = function (tokens, idx, options, env, slf) {
  var token = tokens[idx];

  return  '<code' + slf.renderAttrs(token) + '>' +
          escapeHtml(tokens[idx].content) +
          '</code>';
};


default_rules.code_block = function (tokens, idx, options, env, slf) {
  var token = tokens[idx];

  return  '<pre' + slf.renderAttrs(token) + '><code>' +
          escapeHtml(tokens[idx].content) +
          '</code></pre>\n';
};


default_rules.fence = function (tokens, idx, options, env, slf) {
  var token = tokens[idx],
      info = token.info ? unescapeAll(token.info).trim() : '',
      langName = '',
      highlighted, i, tmpAttrs, tmpToken;

  if (info) {
    langName = info.split(/\s+/g)[0];
  }

  if (options.highlight) {
    highlighted = options.highlight(token.content, langName) || escapeHtml(token.content);
  } else {
    highlighted = escapeHtml(token.content);
  }

  if (highlighted.indexOf('<pre') === 0) {
    return highlighted + '\n';
  }

  if (info) {
    i        = token.attrIndex('class');
    tmpAttrs = token.attrs ? token.attrs.slice() : [];

    if (i < 0) {
      tmpAttrs.push([ 'class', options.langPrefix + langName ]);
    } else {
      tmpAttrs[i][1] += ' ' + options.langPrefix + langName;
    }

    tmpToken = {
      attrs: tmpAttrs
    };

    return  '<pre><code' + slf.renderAttrs(tmpToken) + '>'
          + highlighted
          + '</code></pre>\n';
  }


  return  '<pre><code' + slf.renderAttrs(token) + '>'
        + highlighted
        + '</code></pre>\n';
};


default_rules.image = function (tokens, idx, options, env, slf) {
  var token = tokens[idx];

  token.attrs[token.attrIndex('alt')][1] =
    slf.renderInlineAsText(token.children, options, env);

  return slf.renderToken(tokens, idx, options);
};


default_rules.hardbreak = function (tokens, idx, options /*, env */) {
  return options.xhtmlOut ? '<br />\n' : '<br>\n';
};
default_rules.softbreak = function (tokens, idx, options /*, env */) {
  return options.breaks ? (options.xhtmlOut ? '<br />\n' : '<br>\n') : '\n';
};


default_rules.text = function (tokens, idx /*, options, env */) {
  return escapeHtml(tokens[idx].content);
};


default_rules.html_block = function (tokens, idx /*, options, env */) {
  return tokens[idx].content;
};
default_rules.html_inline = function (tokens, idx /*, options, env */) {
  return tokens[idx].content;
};

function Renderer() {
  this.rules = assign({}, default_rules);
}
复制代码

default_rules 对象存在不一样类型的 token 渲染函数。

1. `code_inline` 是渲染 `我是 code_inline ` 语法
  2. `fence` 是渲染 ``` js ``` 语法
  3. `html_block` 是渲染 HTMl 标签
复制代码

再来细看 render 方法的逻辑，由于 内部使用到这些渲染函数。

Renderer.prototype.render = function (tokens, options, env) {
  var i, len, type,
      result = '',
      rules = this.rules;

  for (i = 0, len = tokens.length; i < len; i++) {
    type = tokens[i].type;

    if (type === 'inline') {
      result += this.renderInline(tokens[i].children, options, env);
    } else if (typeof rules[type] !== 'undefined') {
      result += rules[tokens[i].type](tokens, i, options, env, this);
    } else {
      result += this.renderToken(tokens, i, options, env);
    }
  }

  return result;
};
复制代码

render 逻辑很简单，传入 tokens，options，env。遍历全部的 token，根据它的 type 采用不一样的渲染 rule 函数。

• type 是 inline

  Renderer.prototype.renderInline = function (tokens, options, env) {
    var type,
        result = '',
        rules = this.rules;
  
    for (var i = 0, len = tokens.length; i < len; i++) {
      type = tokens[i].type;
  
      if (typeof rules[type] !== 'undefined') {
        result += rules[type](tokens, i, options, env, this);
      } else {
        result += this.renderToken(tokens, i, options);
      }
    }
  
    return result;
  };
  复制代码

  据咱们以前分析的 ParserInline，它的做用是进一步解析 type 为 inline 的 token，而且它的 children 属性上放了编译出来的 token。那么 renderInline 就是用到它的 children 上的 token。若是 renderer.rules存在对应类型的渲染 rule 函数，就会用这个渲染 rule 函数去处理对应 type 的 token，不然都走 render.renderToken 的逻辑。

• typeof rules[type] !== 'undefined'

  用不一样渲染 rule 来处理对应 type 的 token。好比 type 为 fence 的就用 default_rule.fence 来渲染。每一个 rule 都很简单，就不细谈。

• renderToken

  若是都不知足以上条件，就用 renderToken 来渲染 token。

  Renderer.prototype.renderToken = function renderToken(tokens, idx, options) {
    var nextToken,
        result = '',
        needLf = false,
        token = tokens[idx];
  
    // Tight list paragraphs
    if (token.hidden) {
      return '';
    }
  
    if (token.block && token.nesting !== -1 && idx && tokens[idx - 1].hidden) {
      result += '\n';
    }
  
    result += (token.nesting === -1 ? '</' : '<') + token.tag;
  
    result += this.renderAttrs(token);
  
    if (token.nesting === 0 && options.xhtmlOut) {
      result += ' /';
    }
  
    if (token.block) {
      needLf = true;
  
      if (token.nesting === 1) {
        if (idx + 1 < tokens.length) {
          nextToken = tokens[idx + 1];
  
          if (nextToken.type === 'inline' || nextToken.hidden) {
            needLf = false;
  
          } else if (nextToken.nesting === -1 && nextToken.tag === token.tag) {
            needLf = false;
          }
        }
      }
    }
  
    result += needLf ? '>\n' : '>';
  
    return result;
  };
  复制代码

  renderToken 的做用就是渲染开标签或者闭合标签，内部还会调用 renderAttrs 来生成 attributes。

render 的最后，就是输出 HTML 字符串。

总结

至此，MarkdownIt 的所有流程已经分析完毕，在整个 parse 抑或是 tokenize、render 的过程当中，都是不一样的 rule 函数在各司其职，这也就赋予了 MarkdownIt 极大的灵活性和扩展性，你能够去替换 parse rule，也能够去替换 tokenize rule 或者 render rule。来张流程图大体感觉一下：

假如咱们须要在 markdown 里面支持 emoji 语法呢，甚至还有更多定制化的需求呢？那咱们就必须得写插件，你可能并不须要对某个 rule 的全部细节都知根知底，可是你必须对源码的总体流程是特别熟悉，咱们将在插件篇讲解一些比较有趣的插件。