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

Faremax 发布于2019-08-23 12:25 / 1910人阅读

摘要：使用的初体验，主题外观都很满意，除了代码段的显示效果。用加高亮做关键字，能搜出一大堆的代码高亮方案。因为有了新的功能代码注入。加入目前第三方高亮模块，主要以和为主，二者没有太大的区别。让高亮生效加入后，并没有让高亮效果马上生效。

使用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中，填入：

在Blog Footer中，填入：

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

让高亮生效

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

#```html  // 这里实际没有#

    ...

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

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

云服务器专线服务代码高亮 sublime-text2-标签高亮代码高亮插件 bootstrap代码高亮

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98494.html

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

摘要：使用的初体验，主题外观都很满意，除了代码段的显示效果。用加高亮做关键字，能搜出一大堆的代码高亮方案。因为有了新的功能代码注入。加入目前第三方高亮模块，主要以和为主，二者没有太大的区别。让高亮生效加入后，并没有让高亮效果马上生效。使用Ghost的初体验，主题外观都很满意，除了代码段的显示效果。没有代码高亮，这效果怎么说呢？就像是使用了文本编辑器在写代码，说不上离经叛道，但就是从心底觉...

kyanag 2019-07-31 15:02 评论0 收藏0
Ghost配置3——添加评论系统

摘要：目前知名的第三方系统大概有畅言搜狐出品，目前国内用户量第一来比力另一家国产第三方评论系统推荐使用的评论系统，经常被墙根据网络上的反馈，第一想法是使用畅言。毕竟是搜狐出品，品质和功能都是可以保证的。用上Ghost发表第一篇文章以后，突然意识到一个问题，这货没有评论系统？看了下官网的说明，他们把主要精力都放在了博客系统的基础功能上，对于周边功能可以通过引入第三方功能来实现。例如代码的高...

StonePanda 2019-07-31 15:02 评论0 收藏0
Ghost配置3——添加评论系统

摘要：目前知名的第三方系统大概有畅言搜狐出品，目前国内用户量第一来比力另一家国产第三方评论系统推荐使用的评论系统，经常被墙根据网络上的反馈，第一想法是使用畅言。毕竟是搜狐出品，品质和功能都是可以保证的。用上Ghost发表第一篇文章以后，突然意识到一个问题，这货没有评论系统？看了下官网的说明，他们把主要精力都放在了博客系统的基础功能上，对于周边功能可以通过引入第三方功能来实现。例如代码的高...

魏宪会 2019-08-23 12:28 评论0 收藏0
Ghost配置1——删除社交Link

摘要：取消尾部的找到主题目录下的找到和对应的行，直接删除或者用注释包裹起来如果想把改掉，直接修改文言最近更新这一步做完以后，网站尾部的社交也会消失。取消详情页浮动头部的在详情页往下滑浏览内容时，会出现一个浮动头部，头部中同样有社交标志。搭建个人博客，我找了很多开源的产品。从重型的WordPress到一些轻量级的产品如solo，都挨个试了个遍。要么就是功能过重，要么功能单一，要么界面丑陋。 ...

tigerZH 2019-07-31 15:02 评论0 收藏0
Ghost配置1——删除社交Link

摘要：取消尾部的找到主题目录下的找到和对应的行，直接删除或者用注释包裹起来如果想把改掉，直接修改文言最近更新这一步做完以后，网站尾部的社交也会消失。取消详情页浮动头部的在详情页往下滑浏览内容时，会出现一个浮动头部，头部中同样有社交标志。搭建个人博客，我找了很多开源的产品。从重型的WordPress到一些轻量级的产品如solo，都挨个试了个遍。要么就是功能过重，要么功能单一，要么界面丑陋。 ...

import. 2019-08-23 12:23 评论0 收藏0