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

時間 2019-12-13

標籤 ghost 配置添加代碼简体版

原文原文鏈接

使用Ghost的初體驗，主題外觀都很滿意，除了代碼段的顯示效果。css

沒有代碼高亮，這效果怎麼說呢？就像是使用了文本編輯器在寫代碼，說不上離經叛道，但就是從心底以爲一個字：土。
html

用Ghost加高亮作關鍵字，能搜出一大堆的代碼高亮方案。不過在Ghost版本2.0之後，再去修改代碼來載入js和css文件已經沒有必要。由於Ghost有了新的功能：代碼注入（Code Injection）。ajax

對於Ghost的全部頁面，都使用了default.hbt做爲了基礎模板文件。在模板的header和body末尾，均可以注入用戶自定義的代碼。markdown

目前第三方高亮模塊，主要以highlight.js和prism.js爲主，兩者沒有太大的區別。我選擇了應用更普遍的highlight.js。
編輯器

highlight.js主要有兩部分組成，一部分是引用的CSS文件，一部分是JS文件。進入Ghost管理後臺，點擊code injection菜單，分別將兩者寫入便可。
spa

在Blog Header中，填入：code

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

在Blog Footer中，填入：cdn

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

注意，我這裏選擇了monokai的高亮風格，也能夠根據實際須要，選擇本身的樣式風格。具體樣式，能夠參考這裏。htm

加入highlight.js後，並無讓高亮效果立刻生效。Ghost的編輯器在輸入代碼段以前，須要輸入三個`符號，而後自動彈出一個代碼段輸入的卡片。而highlight例子中，須要輸入三個`並指定語言名稱纔會有高亮效果。如：圖片

#```html  // 這裏實際沒有#
<html>
    ...
</html>

問題是，用如今的編輯器在我輸三個`的時候就會自動彈出代碼段輸入卡片，根本不給我寫語言名稱的機會吶。

被這個問題困擾了半天，忽然一想：編輯器不是自帶插入markdown片斷的功能嗎？因而試了一試，問題便迎刃而解了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。