解决Bootstrap中代码不高亮问题
背景:本人用
node.js
+bootstrap
搭建的博客,可惜用marked
解析markdown
语法后,代码显示灰底黑字,样子很丑。
所以找到了这个方法,可以让代码高亮,虽然也不漂亮,但比原始状态稍好些。
先来看看对比图:
============>
解决方案
找了好多的解决方案,无意中在github
上发现了google/code-prettify
这个项目,本次修改就是在这个基础之上。github项目链接
开始干活
第一步
我们从github上的说明可以看到,在使用之前需要引入一个js
文件,我们可以把这个文件download
下来放到我们服务器里。
执行如下命令
$ 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关键字)
修改成如下所示
第三步
重启服务,试试你的markdown 代码块效果吧。
新博客地址:http://www.crabx.site 各种功能还未完善,请手下留情。
Do one thing , and do it well !
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET 原生驾驭 AI 新基建实战系列:向量数据库的应用与畅想
· 从问题排查到源码分析:ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· dotnet 源代码生成器分析器入门
· ASP.NET Core 模型验证消息的本地化新姿势
· 开发的设计和重构,为开发效率服务
· 从零开始开发一个 MCP Server!
· .NET 原生驾驭 AI 新基建实战系列(一):向量数据库的应用与畅想
· Ai满嘴顺口溜,想考研?浪费我几个小时
· ThreeJs-16智慧城市项目(重磅以及未来发展ai)