markdown编辑器如何自动生成目录 showdown toc插件的使用
文章目录
markdown如何转化成html
markdown 文本转化成 html 成熟的工具有不少,
node 开源库中有
- markdown-it
- showdown
- markdown-to-html
- marked
- markdown
上面的工具各有优势,自行google开源地址,找到一款最适合自己的.
本人博客一直是markdown编辑器撰写,
然后,一直再琢磨如何通过标题来自动生成内容目录,
造轮子的事情还是留给大牛们,
我们能把轮子使用好也是对大牛们的敬仰和支持.
markdown-it 介绍
开源地址: https://github.com/markdown-it/markdown-it
目前扩展性和活跃度非常好.对于开发者(Plug-Ins 或者贡献者)，它提供了文档，
不过这个文档可是建立在你首先阅读源程序的基础上.
当你创建了一个 md = require('markdown-it')() 对象之后，就可以用它来渲染 MD 文档了，例如: md.render("# I'm H1 ")。这个渲染过程分为主要的两步:
- 将 MD 文档 Parsing 为 Tokens
- 渲染这个 Tokens
Parsing 的过程是，首先创建一个 Core Parser，这个 Core Parser 包含一系列的缺省 Rules.
这些 Rules 将顺序执行，每个 Rule 都在前面的 Tokens 的基础上，要么修改原来的 Token，要么添加新的 Token.
这个 Rules 的链条被称为 Core Chain
Block rule 的执行过程，会启动 Block Chain，这又是一堆 Rules 的执行，缺省包含:
var _rules = [
// First 2 params - rule name & source. Secondary array - list of rules,
// which can be terminated by this one.
[ 'table', require('./rules_block/table'), [ 'paragraph', 'reference' ] ],
[ 'code', require('./rules_block/code') ],
[ 'fence', require('./rules_block/fence'), [ 'paragraph', 'reference', 'blockquote', 'list' ] ],
[ 'blockquote', require('./rules_block/blockquote'), [ 'paragraph', 'reference', 'list' ] ],
[ 'hr', require('./rules_block/hr'), [ 'paragraph', 'reference', 'blockquote', 'list' ] ],
[ 'list', require('./rules_block/list'), [ 'paragraph', 'reference', 'blockquote' ] ],
[ 'reference', require('./rules_block/reference') ],
[ 'heading', require('./rules_block/heading'), [ 'paragraph', 'reference', 'blockquote' ] ],
[ 'lheading', require('./rules_block/lheading') ],
[ 'html_block', require('./rules_block/html_block'), [ 'paragraph', 'reference', 'blockquote' ] ],
[ 'paragraph', require('./rules_block/paragraph') ]
];
在 Block Chain 执行完了，就是 Inline Rule:
var _rules = [
[ 'text', require('./rules_inline/text') ],
[ 'newline', require('./rules_inline/newline') ],
[ 'escape', require('./rules_inline/escape') ],
[ 'backticks', require('./rules_inline/backticks') ],
[ 'strikethrough', require('./rules_inline/strikethrough').tokenize ],
[ 'emphasis', require('./rules_inline/emphasis').tokenize ],
[ 'link', require('./rules_inline/link') ],
[ 'image', require('./rules_inline/image') ],
[ 'autolink', require('./rules_inline/autolink') ],
[ 'html_inline', require('./rules_inline/html_inline') ],
[ 'entity', require('./rules_inline/entity') ]
];
var _rules2 = [
[ 'balance_pairs', require('./rules_inline/balance_pairs') ],
[ 'strikethrough', require('./rules_inline/strikethrough').postProcess ],
[ 'emphasis', require('./rules_inline/emphasis').postProcess ],
[ 'text_collapse', require('./rules_inline/text_collapse') ]
];
这个 Parsing 的过程是一个简单的树形过程，Core Rules 执行到 Block 和 Inline Rule 的时候，会分别再执行 Block Chain 和 Inline Chain.
整个 Parsing 过程是同步的
Markdown-It 的 API 允许 Plugin 作者选择在这些缺省的 Rules 的前后添加新的 Rule 函数，从而实现对特定的 Token 的再处理（增删改 Token 都可以）所以 Plugin 作者的灵活性是足够大的,我们也就看到很多 markdown-it 的衍生开源插件
我之前一直用 markdown-it 来解析 html,也发现几款可以自动生成目录的 toc 插件:
- markdown-it-table-of-contents
- markdown-it-toc-done-right
最后目录生成过程中,html 丢失锚点....
虽然自动生成目录没有成功,但是代码依然贴出来,如果是我自己书写问题导致,麻烦指正,谢谢
"use strict";
var MarkdownIt = require('markdown-it');
// Set default options
var md = new MarkdownIt();
md.set({
html: true, // Enable HTML tags in source
xhtmlOut: true, // Use '/' to close single tags (<br />)
breaks: false, // Convert '\n' in paragraphs into <br>
linkify: true, // Autoconvert URL-like text to links
typographer: true, // Enable smartypants and other sweet transforms
});
md.use(require('markdown-it-named-headings')).use(require("markdown-it-anchor"), {
level: 1,
collisionSuffix: 'v',
permalink: true,
permalinkClass: 'header-anchor',
permalinkSymbol: '¶'
}).use(require("markdown-it-table-of-contents"));
以上用到的插件有:
- markdown-it-named-headings
- markdown-it-anchor
- markdown-it-table-of-contents
showdown 开源库解析html
开源地址:https://github.com/showdownjs/showdown
使用非常简单
var showdown = require('showdown'),
converter = new showdown.Converter(),
text = '# hello, markdown!',
html = converter.makeHtml(text);
同样支持插件扩展解析html
本博客就用到了 toc 插件:showdown-toc
esm
npm i showdown-toc --save
umd
<script src="showdown.js"></script>
<script src="//unpkg.com/showdown-toc/dist/index.umd.min.js"></script>
示例
import Showdown from 'showdown';
import showdownToc from 'showdown-toc';
const content = 'your markdown content';
const toc = [
{ anchor: 'header-1', level: 1, text: 'header 1' },
{ anchor: 'header-2', level: 2, text: 'header 2' }
];
const showdown = new Showdown.Converter({ extensions: [showdownToc({ toc })] });
const result = showdown.makeHtml(content);
return result;
示例内容
生成效果
如本博文的实际效果