Ghost加入Prism高代高亮显示

2016-09-28  本文已影响356人  陶清清

常见的代码高亮显示的框架有Prism和highlight.js,highlight以前使用过,略微显得有点麻烦,然后这次选择时,看了下prism,感觉使用似乎更为简单。而关于兼容性,我觉得:

不用chrome的开发,不是一个好程序员。

所以,兼容性作为一个技术类博客来说,基本不要多考虑。

下面来看看,ghost中,如何加入prism。

1. 访问官网生成css和js文件

官网链接:http://prismjs.com/download.html

主要有三个选项:

  1. 选择主题
  2. 选择需要支持高亮的语言
  3. 选择需要的插件

主题可以自己预览,然后选择自己喜欢的主题。其他的,如果有选择纠结症的同学,可以直接全选。坏处是,就是生产的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{
//.......
}
# ``` //把#号去掉,这里是因为避免转义,所以加了个#号
上一篇下一篇

猜你喜欢

热点阅读