PrismJS

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

如何在 Ghost Blog 中擁有上圖程式碼標記和顯示的功能呢? 試試看 Prism.js,不僅設置簡單,各類程式碼支援非常完整,連 ReactJS 的 JSX 都有支援,而且檔案極小,有多種主題可以做選擇,並可以針對自己的需求選取會用到的語言,縮短網頁讀取的時間。 根據需求客製化Prism 進入到 Prism 官網的下載頁面後,可以根據自己的需求選取主題和語言,若沒有要做進階的客製化調整,最上方選取預設的 Minified version 就可以。 選取主題和支援語言 標記程式碼的主題,一共有六種,可以透過網頁右方的按鈕玩玩看不同的主題,並圈選其中一個。 下方則有提供支援語言的選取,可以看到支援的非常豐富,選取自己可能會用到的就好,避免拖慢網頁載入速度太多。 選取外掛功能 Prism 標記功能還有各種附加的外掛可以使用,圈選出程式碼中最重要的幾行 code 的 Line Highlight 功能,根據你的需求挑選附加功能即可。 選取完成後會算出最後生成的 CSS + Javascript