解决Bootstrap中代码不高亮问题

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

先来看看对比图:
============>前端

解决方案

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

开始干活

第一步

咱们从github上的说明能够看到,在使用以前须要引入一个js文件,咱们能够把这个文件download下来放到咱们服务器里。

执行以下命令node

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

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

第二步

github上的文档使用说明,咱们能够看到,须要给<pre>标签加上class="prettyprint"才能使代码高亮。可是咱们知道bootsctrap自己的pre标签是没有这个class的,因此咱们能够在marked.js解析markdown文件的时候作些修改。github

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

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

$ cd node_modules/lib
$ vim marked.js

找到如图因此位置(能够查找pre关键字)
vim

修改为以下所示
服务器

第三步

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

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

相关文章
相关标签/搜索