在 Blogger 中使用 Prism.js 讓程式碼高亮

之前在 Prism.js 程式碼高亮顯示工具 這篇中有介紹到 Prism.js,但是要怎麼在 Google Blogger 中使用呢?

首先先依照剛剛那篇文章的內容下載 JS 和 CSS 這兩個檔案,依照 替 GitHub 專案 自動增加 CDN (jsDelivr) 這篇的內容上傳到 Github 以後,即可自動啟用 CND 功能。

在 Blogger 中點選 主題 > 自訂 > 編輯 HTML 透過搜尋找到 <head> 後,將 css 檔案的連結放置在此,或是可以使用筆者做好的連結
    
    <link href='https://cdn.jsdelivr.net/gh/ruyut/blog-static-resource/css/prism.css' rel='stylesheet' type='text/css'/>
    


切換到版面配置,點選新增小工具 > HTML/JavaScript ,將 JS 檔案的連結貼在下方
    
    <script src='https://cdn.jsdelivr.net/gh/ruyut/blog-static-resource/js/prism.js' type='text/javascript'/>
    


註:筆者測試時發現一定要貼在「頁尾」區塊中,不然會跑版

之後在撰寫文章時只要切換到「撰寫模式」,使用下列語法把程式碼包起來,在「預覽」的時候就可以看到了
    
<pre >
  <code class="language-text">
   這是程式碼區塊
  </code>
</pre>
    

編輯畫面:

預覽畫面


留言