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

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值