Markdown-It in Browser
🏷️ Markdown
markdown-it 是一款将 Markdown 格式文本转为 HTML 的前端工具，感觉插件比较丰富，所以就将站点的 Markdown 转换工具从 Editor.md 改成了这个。
在 node.js 项目中使用时直接通过 npm i {package-name} 安装就可以了，在浏览器中使用的方式稍微有些不同。
这里记录下自己使用的几款插件。部分没有提供浏览器版本的插件使用的 browserify 和 terser 来打包和压缩，使用方法仅供参考。
1. 基础功能：markdown-it
代码仓库：https://github.com/markdown-it/markdown-it
打包好的 js 文件默认在代码仓库的 dist 目录下（如果有的话）。后面的插件都是类似的。
官方提供的插件 -- markdown-it 用户下的插件 -- 都支持从浏览器加载，但是大多数非官方的插件默认都没有添加浏览器支持，需要自己打包。
<script src="/markdown-it/13.0.1/markdown-it.min.js"></script>
<script>
var md = window.markdownit({
html: true,
linkify: true,
typographer: true
});
</script>2. 代码高亮：highlight.js
highlight.min.js 从 highlight.js 官网下载即可。可以在 Download 页面自定义需要高亮的编程语言。
除了 js 还需要添加一个主题 css 文件，这里使用的是 /base16/eva.min.css。
<script src="/highlight/highlight.min.js"></script>
<link href="/highlight/styles/base16/eva.min.css" rel="stylesheet">
<script>
var md = window.markdownit({
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return '<pre class="hljs"><code>' +
hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
'</code></pre>';
} catch (__) {}
}
return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
}
});
</script>3. 任务列表：markdown-it-task-lists
代码仓库：https://github.com/revin/markdown-it-task-lists
<script src="/markdown-it/plugins/markdown-it-task-lists/2.1.1/markdown-it-task-lists.min.js"></script>
<script>
var md = window.markdownit()
.use(markdownitTaskLists);
</script>- [x] task 1
- [x] task 1.1
- [x] task 1.2
- [ ] task 2
- [x] task 2.1
- [ ] task 2.2
- [ ] task 3- task 1
- task 1.1
- task 1.2
- task 2
- task 2.1
- task 2.2
- task 3
4. 缩写词：markdown-it-abbr
代码仓库：https://github.com/markdown-it/markdown-it-abbr
<script src="/markdown-it/plugins/markdown-it-abbr/1.0.4/markdown-it-abbr.min.js"></script>
<script>
var md = window.markdownit()
.use(markdownitAbbr);
</script>This is HTML abbreviation example.
*[HTML]: Hyper Text Markup LanguageThis is HTML abbreviation example.
5. 上标和下标：markdown-it-sub / markdown-it-sup
代码仓库：https://github.com/markdown-it/markdown-it-sub / https://github.com/markdown-it/markdown-it-sup
<script src="/markdown-it/plugins/markdown-it-sub/1.0.0/markdown-it-sub.min.js"></script>
<script src="/markdown-it/plugins/markdown-it-sup/1.0.0/markdown-it-sup.min.js"></script>
<script>
var md = window.markdownit()
.use(markdownitSub)
.use(markdownitSup);
</script>- 19^th^
- H~2~O- 19th
- H2O
6. 脚注：markdown-it-footnote
代码仓库：https://github.com/markdown-it/markdown-it-footnote
<script src="/markdown-it/plugins/markdown-it-footnote/3.0.3/markdown-it-footnote.min.js"></script>
<script>
var md = window.markdownit()
.use(markdownitFootnote);
</script>Footnote 1 link[^first].
[^first]: Footnote **can have markup** and multiple paragraphs.Footnote 1 link[1].
7. 新插入文本：markdown-it-ins
代码仓库：https://github.com/markdown-it/markdown-it-ins
<script src="/markdown-it/plugins/markdown-it-ins/3.0.1/markdown-it-ins.min.js"></script>
<script>
var md = window.markdownit()
.use(markdownitIns);
</script>++Inserted text++Inserted text
8. 记号文本：markdown-it-mark
代码仓库：https://github.com/markdown-it/markdown-it-mark
<script src="/markdown-it/plugins/markdown-it-mark/3.0.1/markdown-it-mark.min.js"></script>
<script>
var md = window.markdownit()
.use(markdownitMark);
</script>==Marked text==Marked text
9. 容器：markdown-it-container
代码仓库：https://github.com/markdown-it/markdown-it-container
这个是官方提供的一个可自定义性非常高的插件，可以自己编写匹配及渲染的逻辑。
下面是我这边使用的可以将 class 后面的样式添加到元素的代码：
<script src="/markdown-it/plugins/markdown-it-container/3.0.0/markdown-it-container.min.js"></script>
<script>
var md = window.markdownit()
.use(markdownitContainer, 'class', {
validate: function(params) {
return params.trim().match(/^class\s+(.*)$/);
},
render: function (tokens, idx, _options, env, slf) {
var m = tokens[idx].info.trim().match(/^class\s+(.*)$/);
if (tokens[idx].nesting === 1) {
tokens[idx].attrJoin('class', m[1]);
}
return slf.renderToken(tokens, idx, _options, env, slf);
}
});
</script>::: class bg-warning text-light custom-container danger
here be dangerous
:::here be dangerous
10. 锚点：markdown-it-anchor
代码仓库：https://github.com/valeriangalliat/markdown-it-anchor
<script src="/markdown-it/plugins/markdown-it-anchor/8.6.5/markdown-it-anchor.min.js"></script>
<script>
var md = window.markdownit()
.use(markdownItAnchor, { permalink: true, permalinkBefore: true, permalinkSymbol: '§' } );
</script>效果见当前小结的标题。
11. 目录：markdown-it-toc-done-right
依赖于上面的锚点插件：markdown-it-anchor
代码仓库：https://github.com/nagaozen/markdown-it-toc-done-right
<script src="/markdown-it/plugins/markdown-it-toc-done-right/4.2.0-5/markdown-it-toc-done-right.min.js"></script>
<script>
var md = window.markdownit()
.use(markdownItTocDoneRight);
</script><!-- [TOC] -->效果见文章头部的目录。
12. 数学公式：markdown-it-katex
代码仓库：https://github.com/waylonflinn/markdown-it-katex
<script src="/markdown-it/plugins/markdown-it-katex/2.0.3/markdown-it-katex.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css">
<script>
var md = window.markdownit()
.use(markdownItKatex);
</script>$$\sqrt{3x-1}+(1+x)^2$$13. 流程图：markdown-it-mermaid
代码仓库：https://github.com/wekan/markdown-it-mermaid
主要还是依赖于 mermaid 组件。
这个我打的包特别大，因为前端知识有限，不确定是就这么大还是打包的方式不对。另外 .use() 的时候传参也稍有区别。
<script src="/markdown-it/plugins/markdown-it-mermaid/0.6.0/markdown-it-mermaid.js"></script>
<script>
var md = window.markdownit()
.use(markdownItMermaid.default);
</script>flowchart TD
Start --> Stop
14. 图标：markdown-it-fontawesome
代码仓库：https://github.com/nunof07/markdown-it-fontawesome
<script src="/markdown-it/plugins/markdown-it-fontawesome/0.3.0/markdown-it-fontawesome.js"></script>
<script>
var md = window.markdownit()
.use(markdownItFontAwesome);
</script>Hello World! :fa-flag:Hello World!
Footnote can have markup and multiple paragraphs. ↩︎