-
Notifications
You must be signed in to change notification settings - Fork 7
Ghost博客中使用highlight.js
个人博客原文地址: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下的主题目录:
casper-zh ghostium roon-zh
我这里有三个主题,我们接下来要修改主题文件夹下的default.hbs文件:
找到<head>
标签,在其内添加我们需要的highlight.js的样式:
<link href="//cdn.bootcss.com/highlight.js/9.0.0/styles/tomorrow.min.css" rel="stylesheet">
然后在<body>
里引入js文件:
<script src="//cdn.bootcss.com/highlight.js/9.0.0/highlight.min.js"></script>
同时在其后面再添加一句js的调用代码:
<script >hljs.initHighlightingOnLoad();</script>
工作完成,在我们ghost下所有的页面,highlight.js都会自动寻找< pre><code class="python"></code></pre >
标签对其操作使代码实现高亮,在markDown编辑器中我们只需要像往常一样使用“```”语法来键入代码块即可,除了我们可以为代码块指定语言外,highlight.js还会==自动分析==语言对其进行高亮处理,手动选择语言样式的书写格式如下:
```c++
//something
附上:
[highlight.js样式浏览1](https://highlightjs.org/static/demo/)
[highlight.js样式浏览2](http://jmblog.github.io/color-themes-for-highlightjs/)
[highlight.js官网](https://highlightjs.org/)
<br>
###样式展示:
Androidstudio <br>
Monokai <br>
Xcode <br>
Tomorrow 