上节
Forever Sun:Markdown转成带目录的Html(i5ting_toc)已经讲了markdown怎样转成html,这节我们学习怎样把转好的html,代码部分怎样高亮。
本文采取的高亮插件是谷歌的
google/code-prettify会了下面的操作您可以使用如highlight.js,SyntaxHighlighter.js等等
步骤1:进入i5ting_toc安装路径
![v2-1a9aafbecc53e4c0ed291615d1228f4a_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/33574c071d5cc26587d872555c307e0f.png)
步骤2:打开上图的marked/lib文件夹下的marked.js,804行
![v2-7cd9feac8fb85b72c7e4d5ff0ab8def8_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/272682d6446ea386d057ea8d837318fd.jpeg)
改为
![v2-60f92f5c5af33ae76873bec34b2e19d7_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/19864cdd278a24853e8c04164f951997.png)
步骤3:打开如图templete.html
![v2-15f9d5e27eec0e26ffd247c3e94b5862_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/2611aff51e5c4e7db48dedc46a58d53a.png)
引入
![v2-8599bbcad7953a61af7567d7c211a08a_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/f7b9b84ec17a6c7fa5a42fedd8e5daa7.jpeg)
延时加载树结构(防止树结构点击定位不准)
![v2-6981a38e0f6fc6c85267995dd7268920_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/05666d4ee4f3fb9ca31cdec1cf678422.png)
cmd执行
i5ting_toc -f sample.md -o
或者
npx i5ting_toc -f sample.md -o
查看代码部分
![v2-7df518e505105e21604f04ddc52ff60a_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/2043b50d5c20db7c294270e5ef16b987.jpeg)
原来
![v2-20f819f627872b2b0bdc48342441b8d4_b.jpg](https://i-blog.csdnimg.cn/blog_migrate/2f1137aa81b89f3befa65f1e675fbfa3.jpeg)
这样看起来是不是好看多了?