通过 markdown-it 解析 markdown 文本

markdown-it 是流行的 markdown 解析库,插件丰富。

文档

https://markdown-it.docschina.org/

实例化

可传入配置,如需要支持 html 文本(兼容富文本编辑器内容渲染),可设置为 true 。

var md = require("markdown-it")({
  html: false, // 在源码中启用 HTML 标签
  xhtmlOut: false, // 使用 '/' 来闭合单标签 (比如 <br />)。
  // 这个选项只对完全的 CommonMark 模式兼容。
  breaks: false, // 转换段落里的 '\n' 到 <br>。
  langPrefix: "language-", // 给围栏代码块的 CSS 语言前缀。对于额外的高亮代码非常有用。
  linkify: false, // 将类似 URL 的文本自动转换为链接。

  // 启用一些语言中立的替换 + 引号美化
  typographer: false,

  // 双 + 单引号替换对,当 typographer 启用时。
  // 或者智能引号等,可以是 String 或 Array。
  //
  // 比方说,你可以支持 '«»„“' 给俄罗斯人使用, '„“‚‘'  给德国人使用。
  // 还有 ['«\xA0', '\xA0»', '‹\xA0', '\xA0›'] 给法国人使用(包括 nbsp)。
  quotes: "“”‘’",

  // 高亮函数,会返回转义的HTML。
  //'' 如果源字符串未更改,则应在外部进行转义。
  // 如果结果以 <pre ... 开头,内部包装器则会跳过。
  highlight: function (/*str, lang*/) {
    return "";
  },
});

渲染:

var result = md.render("# hello");

使用插件

var md = require("markdown-it")(),
  mk = require("@iktakahiro/markdown-it-katex");

md.use(mk);

// double backslash is required for javascript strings, but not html input
var result = md.render("# Math Rulez! \n  $\\sqrt{3x-1}+(1+x)^2$");

代码高亮

配合 highlight 实现:

var hljs = require("highlight.js"); // https://highlightjs.org/

// 通常的默认值们
var md = require("markdown-it")({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(lang, str).value;
      } catch (__) {}
    }

    return ""; // 使用额外的默认转义
  },
});
本文收录于专栏
收集一些好用的前端开源库,主要是 npm 包