佳佳的博客

Appearance

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 用户下的插件 -- 都支持从浏览器加载，但是大多数非官方的插件默认都没有添加浏览器支持，需要自己打包。

html
<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。

html
<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

html
<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>
markdown
- [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

html
<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>
markdown
This is HTML abbreviation example.
*[HTML]: Hyper Text Markup Language

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

html
<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>
markdown
- 19^th^
- H~2~O
  • 19th
  • H2O

6. 脚注：markdown-it-footnote ​

代码仓库：https://github.com/markdown-it/markdown-it-footnote

html
<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>
markdown
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

html
<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>
markdown
++Inserted text++

Inserted text

8. 记号文本：markdown-it-mark ​

代码仓库：https://github.com/markdown-it/markdown-it-mark

html
<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>
markdown
==Marked text==

Marked text

9. 容器：markdown-it-container ​

代码仓库：https://github.com/markdown-it/markdown-it-container

这个是官方提供的一个可自定义性非常高的插件，可以自己编写匹配及渲染的逻辑。

下面是我这边使用的可以将 class 后面的样式添加到元素的代码：

html
<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>
markdown
::: 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

html
<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

html
<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>
markdown
<!-- [TOC] -->

效果见文章头部的目录。

12. 数学公式：markdown-it-katex ​

代码仓库：https://github.com/waylonflinn/markdown-it-katex

html
<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>
markdown
$$\sqrt{3x-1}+(1+x)^2$$
3x−1+(1+x)2

13. 流程图：markdown-it-mermaid ​

代码仓库：https://github.com/wekan/markdown-it-mermaid

主要还是依赖于 mermaid 组件。

这个我打的包特别大，因为前端知识有限，不确定是就这么大还是打包的方式不对。另外 .use() 的时候传参也稍有区别。

html
<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

html
<script src="/markdown-it/plugins/markdown-it-fontawesome/0.3.0/markdown-it-fontawesome.js"></script>

<script>
    var md = window.markdownit()
        .use(markdownItFontAwesome);
</script>
markdown
Hello World! :fa-flag:

Hello World!

  1. Footnote can have markup and multiple paragraphs. ↩︎