在 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'></script>


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

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

編輯畫面：

預覽畫面


留言

張貼留言

如果有任何問題、建議、想說的話或文章題目推薦，都歡迎留言或來信: a@ruyut.com