Ghost构建后,默认不会对页面中的代码进行其他处理,无法直观地显示代码结构。我们可以借助highlight.js来实现代码高亮。
本教程非常简单明了,可以帮助您在CentOS 上轻松使用highlight.js。
贴出highlight.js的介绍:
--支持71种编程语言的语法解析
--有44种款式
--自动检测编程语言
--同时高亮多种编程语言的代码
--可以运行在node.js平台上
--支持各种标签
--兼容任何js框架
highlight.js主要是从页面出发,嵌入样式。我看到网上大部分的方法都是把highlight.js下载到本地,然后在页面上用js连接。不过,我认为更适合Windows主机。让我们使用一个简单而快速的方法。方法被实施。主要引入一个css文件和一个js文件,配合Bootstrap提供的CDN链接。无需担心加载速度。在BootCDN中搜索highlight.js即可找到,BootCDN提供了各种历史版本和样式。
这里使用highlight.s9.0.0来作例子,亦可直接跟着同步设置
(演示系统为Centos 6)
首先我们需要在页面中引入css文件:
进入Ghost下的主题目录:
# cd /var/www/ghost/content/themes/
#ls
casper-zh Ghostium roon-zh
我这里有三个主题。接下来我们需要修改主题文件夹中的default.hbs文件:
~# vi Ghostium/default.hbs
找到标签并在其中添加我们需要的highlight.js样式:
css1.png,然后引入js文件:
同时在其后面添加一段js调用代码:
正文中的js.png工作就完成了。在我们幽灵下的所有页面中,highlight.js 都会自动找到pre 标签并操作它来突出显示代码。在markDown编辑器中,我们只需要像往常一样使用“````”使用语法键入代码块即可。除了指定代码块的语言之外,highlight.js 还会==自动分析==语言来突出显示它。手动选择语言风格的书写格式如下:
``c++
//某物
````附:
highlight.js风格浏览1
highlight.js风格浏览2
高亮.js 官方网站
样式展示:
Android工作室
关于在Ghost博客中实现代码高亮的技巧的内容到此结束,希望对大家有所帮助。
【在Ghost博客中实现代码高亮的技巧】相关文章:
2.米颠拜石
3.王羲之临池学书
8.郑板桥轶事十则
用户评论
终于不用看一堆乱码了!有了语法高亮,阅读编程代码真方便。
有20位网友表示赞同!
这篇文章很有用啊,让我学会了在 Ghost 博客里给代码加效果,提升阅读体验。
有6位网友表示赞同!
原来highlight.js可以用在Ghost博客上,我之前没听说过誒!
有5位网友表示赞同!
代码看起来更清晰了,感谢分享这个方法!
有14位网友表示赞同!
这篇文章的图文并茂,讲解很详细,跟着教程一步步就能搞定。
有17位网友表示赞同!
以前看着代码总是感觉像看天书,现在有了语法高亮就轻松多了。
有15位网友表示赞同!
做技术博客的好工具啊!
有16位网友表示赞同!
我试试在自己的博客上用这个方法,看看效果如何。
有19位网友表示赞同!
这篇文章解决了我的一个小困扰,感谢作者!
有16位网友表示赞同!
现在读技术博客更舒服了,赞一个!
有10位网友表示赞同!
Ghost博客的插件真强大,功能越来越丰富了。
有16位网友表示赞同!
这个highlight.js的功能真的很棒,推荐给大家使用。
有5位网友表示赞同!
学习新知识总是需要工具来辅助,这篇文章很有帮助。
有14位网友表示赞同!
代码语法高亮确实能提升阅读效率、我之前就一直想尝试一下
有19位网友表示赞同!
博客里的代码现在看起来更有层次感了!
有6位网友表示赞同!
感谢作者分享这个实用技巧!
有9位网友表示赞同!
Ghost博客真是越来越方便用了,各种功能都能满足我的需求。
有6位网友表示赞同!
以后再写技术类的文章就不会担心代码排版的问题了。
有20位网友表示赞同!
使用highlight.js后,博客内容更专业更有吸引力!
有5位网友表示赞同!
我一定要试试这个方法,提升自己博客的质量。
有15位网友表示赞同!