解决Bootstrap中代码不高亮问题

背景:本人用node.jsbootstrap搭建的博客,可惜用marked解析markdown语法后,代码显示灰底黑字,样子很丑。
所以找到了这个方法,可以让代码高亮,虽然也不漂亮,但比原始状态稍好些。

先来看看对比图:
code1 ============>code2

解决方案

找了好多的解决方案,无意中在github上发现了google/code-prettify这个项目,本次修改就是在这个基础之上。github项目链接

开始干活

第一步

我们从github上的说明可以看到,在使用之前需要引入一个js文件,我们可以把这个文件download下来放到我们服务器里。
prettify
执行如下命令

$ curl https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js > prettify.js

之后你会发现在当前目录下有个prettify.js文件。把这个文件移动到你服务器相应的javascript目录下。然后在前端页面引用之。

第二步

github上的文档使用说明,我们可以看到,需要给<pre>标签加上class="prettyprint"才能使代码高亮。但是我们知道bootsctrap本身的pre标签是没有这个class的,所以我们可以在marked.js解析markdown文件的时候做些修改。

  • 首先确保你的marked模块安装成功,可以参考这篇粉丝日志

打开marked模块目录,修改相应的文件

$ cd node_modules/lib
$ vim marked.js

找到如图所以位置(可以查找pre关键字)
vimprettify

修改成如下所示
vimprettify1

第三步

重启服务,试试你的markdown 代码块效果吧。

新博客地址:http://www.crabx.site 各种功能还未完善,请手下留情。

转载于:https://www.cnblogs.com/ubuntu-kevin/p/5056512.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值