在Ghost博客 中使用 highlight.js 实现 代码高亮

时间:2022-11-03 08:39:27


博客样例

转载请注明出处:
http://zyden.vicp.cc/highlight-js/
谢谢


搭建好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就能找到,提供历史各个版本各个样式


这里使用highlight.s9.0.0来作例子,亦可直接跟着同步设置

(演示系统为Centos 6)

首先我们需要在页面的<head>里引入css文件:
进入Ghost下的主题目录:
# cd /var/www/ghost/content/themes/
# ls
casper-zh ghostium roon-zh

我这里有三个主题,我们接下来要修改主题文件夹下的default.hbs文件:
# vi ghostium/default.hbs

找到<head>标签,在其内添加我们需要的highlight.js的样式:
<link href="//cdn.bootcss.com/highlight.js/9.0.0/styles/tomorrow.min.css" rel="stylesheet">

在Ghost博客 中使用 highlight.js 实现 代码高亮

然后在<body>里引入js文件:
<script src="//cdn.bootcss.com/highlight.js/9.0.0/highlight.min.js"></script>

同时在其后面再添加一句js的调用代码:
<script >hljs.initHighlightingOnLoad();</script>

在Ghost博客 中使用 highlight.js 实现 代码高亮

工作完成,在我们ghost下所有的页面,highlight.js都会自动寻找< pre><code class="python"></code></pre >标签对其操作使代码实现高亮,在markDown编辑器中我们只需要像往常一样使用““`”语法来键入代码块即可,除了我们可以为代码块指定语言外,highlight.js还会==自动分析==语言对其进行高亮处理,手动选择语言样式的书写格式如下:

 ```c++ 
//something
```

附上:
highlight.js样式浏览1
highlight.js样式浏览2
highlight.js官网


样式展示:

Androidstudio
在Ghost博客 中使用 highlight.js 实现 代码高亮

Monokai
在Ghost博客 中使用 highlight.js 实现 代码高亮


Xcode
在Ghost博客 中使用 highlight.js 实现 代码高亮

Tomorrow
在Ghost博客 中使用 highlight.js 实现 代码高亮