Use Prism to color your code in Ghost

Ghost的code block沒有內建syntax highlighting,讓人覺得少了一味,所以來安裝Prism來加點顏色。
-----2017-10-27---2.33.14

-----2017-10-27---2.36.17

  • Prism 預設有 7種樣板可以選,可以點選右側的theme來預覽。
  • 幾乎所有的程式語言都有包含,可查看支援的語言列表
  • 還有一些蠻神奇的好用pluging

安裝筆記

  1. 到http://prismjs.com/download.html ,幾乎就是購物車,選擇你要的theme、語言plugin
    -----2017-10-27---2.41.29
  2. 選完後,到最下面DOWNLOAD JS / DOWNLOAD CSS ,下載prism.jsprism.css
  3. prism.css丟到 ghost/content/themes/你的theme/assets/css
  4. prism.js丟到ghost/content/themes/casper/assets/js
  5. 在theme的路徑下編輯default.hbs
    在上面加入css檔
    <link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />

在最下面引入js檔

    <script type="text/javascript" src="{{asset "js/prism.js"}}"></script>

6.在ghost根資料夾下,重啟ghost $ ghost restart,或者ghost stopghost start
7.完成!