i5ting_toc转成的html,怎样高亮代码?

上节

Forever Sun:Markdown转成带目录的Html(i5ting_toc)

已经讲了markdown怎样转成html,这节我们学习怎样把转好的html,代码部分怎样高亮。

本文采取的高亮插件是谷歌的

google/code-prettify

会了下面的操作您可以使用如highlight.js,SyntaxHighlighter.js等等

步骤1:进入i5ting_toc安装路径

v2-1a9aafbecc53e4c0ed291615d1228f4a_b.jpg

步骤2:打开上图的marked/lib文件夹下的marked.js,804行

v2-7cd9feac8fb85b72c7e4d5ff0ab8def8_b.jpg

改为

v2-60f92f5c5af33ae76873bec34b2e19d7_b.jpg

步骤3:打开如图templete.html

v2-15f9d5e27eec0e26ffd247c3e94b5862_b.jpg

引入

v2-8599bbcad7953a61af7567d7c211a08a_b.jpg

延时加载树结构(防止树结构点击定位不准)

v2-6981a38e0f6fc6c85267995dd7268920_b.jpg



cmd执行

        i5ting_toc -f sample.md -o
      

或者

        npx i5ting_toc -f sample.md -o
      

查看代码部分

v2-7df518e505105e21604f04ddc52ff60a_b.jpg

原来

v2-20f819f627872b2b0bdc48342441b8d4_b.jpg

这样看起来是不是好看多了?

posted @ 2019-12-02 07:16  Forever.Sun  阅读(30)  评论(0)    收藏  举报