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

Posted 2020-09-29 clnchanpin

对于程序猿写博客来说，这代码高亮是起码的要求。可是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代码：