首页 > 代码库 > Ghost本地安装highlight.js使代码高亮

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

对于程序猿写博客来说,这代码高亮是起码的要求。可是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代码:
技术分享

<script type="text/javascript"> $(function () { $(‘pre.prettyprint code‘).each(function () { var lines = $(this).text().split(‘\n‘).length; var $numbering = $(‘
    ‘).addClass(‘pre-numbering‘).hide(); $(this).addClass(‘has-numbering‘).parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($(‘
  • ‘).text(i)); }; $numbering.fadeIn(1700); }); }); </script>

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