码迷,mamicode.com
首页 > Web开发 > 详细

Ghost本地安装highlight.js使代码高亮

时间:2015-07-03 00:17:03      阅读:270      评论:0      收藏:0      [点我收藏+]

标签:ghost   highlight   代码高亮   

对于程序员写博客来说,这代码高亮是起码的要求。但是Ghost本身没有支持高亮代码。但是可以通过扩展来实现,它就是highlight.js——附官方网站,看了下首页介绍,真的很强大,现在说说怎么进行安装,很简单。

下载highlight.js

下载地址

本来已经包含了很多支持的高亮语言,如果上面没找到你要的语言,可以在下面继续 勾选,最后点击下方的下载。

解压安装highlight.js

解压highlight.js到Ghost本地的主题文件夹下面的资源文件夹,我这里是:
技术分享

安装highlight.js

用文本编辑器打开theme文件夹下的default.hbs文件进行编辑:

找到{{! Styles’n’Scripts }},在下面添加:

<link rel="stylesheet" type="text/css" href="{{asset "/highlight/styles/hybrid.css"}}" />

这里的hybrid.css是你想用的代码主题,这里我用的hybrid.css,,个人喜好。还可以选择styles文件夹下的其他主题样式。你可以到这个网站预览各种风格的代码主题,选择自己喜欢的。

找到{{! The main JavaScript file for Casper }},在下面添加:

    <script type="text/javascript" src="{{asset "/highlight/highlight.pack.js"}}"></script>
    <script type="text/javascript">hljs.initHighlightingOnLoad();</script>

如何使用代码高亮

用Ghost自带的markdown编辑器时,按照如下格式:

<pre><code class="python">...</code></pre>

python可以换成其它的语言。

Ok!现在可以体验代码高亮的感觉了!效果如下,这是一段python代码:
技术分享

版权声明:本文为博主原创文章,未经博主允许不得转载。

Ghost本地安装highlight.js使代码高亮

标签:ghost   highlight   代码高亮   

原文地址:http://blog.csdn.net/abclixu123/article/details/46732867

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!