在 Ghost 部落格中加入程式碼標記 - 使用 Prism

如何在 Ghost Blog 中擁有上圖程式碼標記和顯示的功能呢?

試試看 Prism.js,不僅設置簡單,各類程式碼支援非常完整,連 ReactJS 的 JSX 都有支援,而且檔案極小,有多種主題可以做選擇,並可以針對自己的需求選取會用到的語言,縮短網頁讀取的時間。

根據需求客製化Prism

進入到 Prism 官網的下載頁面後,可以根據自己的需求選取主題和語言,若沒有要做進階的客製化調整,最上方選取預設的 Minified version 就可以。

選取主題和支援語言

標記程式碼的主題,一共有六種,可以透過網頁右方的按鈕玩玩看不同的主題,並圈選其中一個。

下方則有提供支援語言的選取,可以看到支援的非常豐富,選取自己可能會用到的就好,避免拖慢網頁載入速度太多。

選取外掛功能

Prism 標記功能還有各種附加的外掛可以使用,圈選出程式碼中最重要的幾行 code 的 Line Highlight 功能,根據你的需求挑選附加功能即可。

選取完成後會算出最後生成的 CSS + Javascript 大小,接著按下面的按鈕分別下載 CSS 和 Javascript 檔案。

將 Prism 加入 Ghost 部落格

進入你的 Ghost 主題的程式碼 (位於 content/themes/[使用的主題]底下),找到 default.hbs這個檔案。

插入Prism.css

將下載的 prism.css ,放到 /assets/styles/ 目錄下,然後在 <head>...</head> 底下加入

<link rel="stylesheet" type="text/css" href="{{asset "styles/prism.css"}}">  

插入Prism.js

將下載的 prism.js ,放到 /assets/scripts/ 目錄下,然後在 </body> 之前加入

<script src="{{asset "scripts/prism.js"}}"></script>  

大功告成,你可以自在的在 Blog 中使用漂亮的程式碼標記功能。

在Ghost中使用 Prism 標記程式碼

標記 HTML
```language-markup
 Hello World!    
 ```
標記 Javascript
```language-javascript
var s = "Highlighting JavaScript";  
alert(s);   
 ```
標記 CSS
```language-css
p { color: red }
```
其它支援語言縮寫列表
  • Markup - markup
  • CSS - css
  • C-like - clike
  • JavaScript - javascript
  • ActionScript - actionscript
  • Apache Configuration - apacheconf
  • AppleScript - applescript
  • ASP.NET (C#) - aspnet
  • AutoHotkey - autohotkey
  • Bash - bash
  • C - c
  • C# - csharp
  • C++ - cpp
  • CoffeeScript - coffeescript
  • CSS Extras - css-extras
  • Dart - dart
  • Eiffel - eiffel
  • Erlang - erlang
  • F# - fsharp
  • Fortran - fortran
  • Gherkin - gherkin
  • Git - git
  • Go - go
  • Groovy - groovy
  • Haml - haml
  • Handlebars - handlebars
  • Haskell - haskell
  • HTTP - http
  • Ini - ini
  • Jade - jade
  • Java - java
  • Julia - julia
  • LaTeX - latex
  • Less - less
  • LOLCODE - lolcode
  • Markdown - markdown
  • MATLAB - matlab
  • NASM - nasm
  • NSIS - nsis
  • Objective-C - objectivec
  • Pascal - pascal
  • Perl - perl
  • PHP - php
  • PHP Extras - php-extras
  • PowerShell - powershell
  • Python - python
  • R - r
  • React JSX - jsx
  • reST (reStructuredText) - rest
  • Rip - rip
  • Ruby - ruby
  • Rust - rust
  • SAS - sas
  • Sass (Scss) - scss
  • Scala - scala
  • Scheme - scheme
  • Smalltalk - smalltalk
  • Smarty - smarty
  • SQL - sql
  • Stylus - stylus
  • Swift - swift
  • Twig - twig
  • TypeScript - typescript
  • Wiki markup - wiki
  • YAML - yaml