常见的代码高亮显示的框架有Prism和highlight.js,highlight以前使用过,略微显得有点麻烦,然后这次选择时,看了下prism,感觉使用似乎更为简单。而关于兼容性,我觉得:
不用chrome的开发,不是一个好程序员。
所以,兼容性作为一个技术类博客来说,基本不要多考虑。
下面来看看,ghost中,如何加入prism。
1. 访问官网生成css和js文件
官网链接:http://prismjs.com/download.html
主要有三个选项:
- 选择主题
- 选择需要支持高亮的语言
- 选择需要的插件
主题可以自己预览,然后选择自己喜欢的主题。其他的,如果有选择纠结症的同学,可以直接全选。坏处是,就是生产的js和css大一点而已嘛:)
2. 下载prism css和js文件
选择完毕之后,点击下面2个大按钮:Download JS
Download CSS
,然后会下载得到两个文件:
prism.css
prism.js
将prism.css放在主题文件夹的assets/css/目录中,将prism.js放到assets/js/目录中。
3. 修改模板代码
在主题文件夹中,找到default.hbs打开,在</head>
加入以下代码
{{# if post}}
<link rel="stylesheet" type="text/css" href="/assets/css/prism.css" />
{{/if}}
然后找到post.hbs打开,在{{/post}}
后面加入下面代码
<script src="/assets/js/prism.js" type="text/javascript"></script>
4. 重启ghost服务
重启ghost服务,然后就大功告成来。
5. 平时如何使用
例如,我们要让一段java代码高亮显示,则按如下方式写:
```java
public class Test{
//.......
}
# ``` //把#号去掉,这里是因为避免转义,所以加了个#号