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

Ghost博客代码高亮教程
本文详细介绍如何在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代码:
这里写图片描写叙述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值