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

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

时间:2017-07-20 12:52:00      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:使用   main   variable   end   ddc   代码高亮   print   写博客   ref   

对于程序猿写博客来说,这代码高亮是起码的要求。可是Ghost本身没有支持高亮代码。

可是能够通过扩展来实现,它就是highlight.js——附官方站点,看了下首页介绍,真的非常强大,如今说说怎么进行安装,非常easy。

下载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使代码高亮

标签:使用   main   variable   end   ddc   代码高亮   print   写博客   ref   

原文地址:http://www.cnblogs.com/clnchanpin/p/7210557.html

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