Ghost 加入 Syntax highlight

Jerry Wang -

前言

聽說 Ghost 已經 1.2 了，預設主題 Casper 就滿厲害的了，不僅有 RWD 還有進度條顯示閱讀進度，當初還想自己寫一個主題呢。

不過依照過往經驗，原預設主題沒有 code syntax highlight，就得自己手動加入了～
在本文章採用 Prism.js（by Lea Verou）的 library 引入使用。

Prism.js

由 CSS 女神 Lea Verou 製作的 highlighting library，可以自由客製化選擇主題以及常使用的程式語言 syntax。

首頁

首頁右邊有 Default, Dark, Funky, Okaida, Twilight, Coy, Solarized light 等常見的八種主題選擇。

點擊後則可以在下方範例即時預覽

客製化

選擇剛剛於首頁測試的主題

在這邊句選自己較常使用的語言，最近叫非常火紅的 Dockerfile, React JSX , Typescript 等語法也都有支援。

附屬外掛，例如：否顯示 line number、line highlight 功能，根據你的需求選擇加入即可

加入 Ghost

  1. 下載 prism.css 及 prism.js
  2. 分別放入個別目錄 assets/css/ 及 assets/js
  3. 修改 defult.hbs，加入 stylesheet link
{{!-- Styles'n'Scripts --}}
    <link rel="stylesheet" type="text/css" href="{{asset "built/screen.css"}}" />
    <link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />
  1. 在同一個檔案下方，加入
   {{!-- The #block helper will pull in data from the #contentFor other template files. In this case, there's some JavaScript which we only want to use in post.hbs, but it needs to be included down here, after jQuery has already loaded. --}}
    {{{block "scripts"}}}
    <script src="{{asset "js/prism.js"}}"></script>
  1. 在將修改好的 theme 壓縮成 zip 並上傳至 Ghost 即可。

就可以在 Ghost 使用 code syntax highlight 拉～～