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
3
4
5
6
7
8
9
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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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>
2
3
4
5
6
- [x] task 1
- [x] task 1.1
- [x] task 1.2
- [ ] task 2
- [x] task 2.1
- [ ] task 2.2
- [ ] task 3
2
3
4
5
6
7
- 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>
2
3
4
5
6
This is HTML abbreviation example.
*[HTML]: Hyper Text Markup Language
2
This 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>
2
3
4
5
6
7
8
- 19^th^
- H~2~O
2
- 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>
2
3
4
5
6
Footnote 1 link[^first].
[^first]: Footnote **can have markup** and multiple paragraphs.
2
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>
2
3
4
5
6
++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>
2
3
4
5
6
==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>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
::: class bg-warning text-light custom-container danger
here be dangerous
:::
2
3
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>
2
3
4
5
6
效果见当前小结的标题。
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>
2
3
4
5
6
<!-- [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>
2
3
4
5
6
7
$$\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>
2
3
4
5
6
flowchart TD
Start --> Stop
2
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>
2
3
4
5
6
Hello World! :fa-flag:
Hello World!
Footnote can have markup and multiple paragraphs. ↩︎