Ghost配置2——添加代码高亮

2024-05-30 10:15:05

使用Ghost的初体验，主题外观都很满意，除了代码段的显示效果。

没有代码高亮，这效果怎么说呢？就像是使用了文本编辑器在写代码，说不上离经叛道，但就是从心底觉得一个字：土。

用Ghost加高亮做关键字，能搜出一大堆的代码高亮方案。不过在Ghost版本2.0以后，再去修改代码来载入js和css文件已经没有必要。因为Ghost有了新的功能：代码注入（Code Injection）。

对于Ghost的所有页面，都使用了default.hbt作为了基础模板文件。在模板的header和body末尾，都可以注入用户自定义的代码。

加入highlight.js

目前第三方高亮模块，主要以highlight.js和prism.js为主，二者没有太大的区别。我选择了应用更广泛的highlight.js。

highlight.js主要有两部分组成，一部分是引用的CSS文件，一部分是JS文件。进入Ghost管理后台，点击code injection菜单，分别将二者写入即可。

在Blog Header中，填入：

<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai.min.css" rel="stylesheet">

在Blog Footer中，填入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script >hljs.initHighlightingOnLoad();</script>

注意，我这里选择了monokai的高亮风格，也可以根据实际需要，选择自己的样式风格。具体样式，可以参考这里。

让高亮生效

加入highlight.js后，并没有让高亮效果马上生效。Ghost的编辑器在输入代码段之前，需要输入三个`符号，然后自动弹出一个代码段输入的卡片。而highlight例子中，需要输入三个`并指定语言名称才会有高亮效果。如：

#```html  // 这里实际没有#
<html>...
</html>

问题是，用现在的编辑器在我输三个`的时候就会自动弹出代码段输入卡片，根本不给我写语言名称的机会呐。

被这个问题困扰了半天，突然一想：编辑器不是自带插入markdown片段的功能吗？于是试了一试，问题便迎刃而解了。

Ghost配置2——添加代码高亮相关推荐

ckeditor4.4.6添加代码高亮
研究了很久才发现,在 ckeditor4.4.6中添加代码高亮超级简单啊,下面直接上过程 ckeditor4.4.6支持自定义代码高亮,利用Code Snippet插件并默认启用highlight.j ...
使用prismjs为网站添加代码高亮功能
prismjs 是一款轻量.可扩展的代码语法高亮库,使用现代化的 Web 标准构建,使用 Prismjs 可以快速为网站添加代码高亮功能,支持超过113中编程语言,还支持多种插件,是简洁.高效的代码高 ...
完美：C# Blazor中显示Markdown并添加代码高亮
昨天发了一篇介绍这个库:C# Blazor中显示Markdown文件,介绍怎么在Blazor中显示Markdown内容的文章,文章内的代码是没有高亮的,思来相去,还是要做好,于是百度到这篇文章.NET ...
ghost里html文件怎么打开,Ghost配置5——添加归档页面
用了一个来月,总体来讲Ghost是令人满意的.虽然界面可配置化程度不如WordPress,但一些小的功能定制起来也非常容易. 例如添加一个归档页面. 添加静态页面在ghost博客中,每一个发表的文章 ...
highlight.js（代码高亮插件）
highlight.js(代码高亮插件) 官网用法查看核心 API Highlight.js 将一些函数导出为hljs对象的方法强调 highlight(code, {language, ign ...
如何配置html prettify,[HTML] Prettify 代码高亮使用总结
======================================================== 作者:qiujuer 网站: 转载请注明出处:外链网址已屏蔽 ============ ...
代码雨代码源复制_小程序基于Parser添加长按复制、代码高亮等功能
程序员技术之旅网站/小程序/公众号进入小程序功能展示引入Parser 微信小程序中引入Parser可直接在GitHub项目主页(https://github.com/jin-yufeng/Pars ...
Ghost本地安装highlight.js使代码高亮
对于程序猿写博客来说,这代码高亮是起码的要求.可是Ghost本身没有支持高亮代码. 可是能够通过扩展来实现,它就是highlight.js--附官方站点,看了下首页介绍,真的非常强大,如今说说怎么进行 ...
html文档支持代码高亮,为HTML中的代码添加语法高亮
Hexo 默认对于代码高亮的处理过于粗暴,改变了其原有的标签形式,而且并没有达到良好的效果,所以尝试自己添加语法高亮功能.此文档也适用于其它HTML文档中代码的语法高亮显示. 我这里使用highli ...

最新文章

热门文章