Blogger 》記錄如何將 highlight.js 快速安裝至 Blogger

主要是記錄一下,怎樣快速安裝 highlight.js 至 Blogger 中。

參考的資料有
  • cdnjs
    主要是利用它提供的 min.js 和 CSS 於 CDN 服務,加載於 Blogger 中
  • highlight.js demo
    呈現各佈景主題的 demo,提供視覺化的選擇

安裝方式

先至 Blogger 後台系統的版面配置,新增一個HTML/Javascript小工具

- 顯示:不顯示
- 標題:想填什麼就填什麼
- 內容:
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
其中 /path/to/ 可以參照 cdnjs 裡面提供的檔案路徑,進行修改即可。

使用方式

撰寫 Blogger 文章中,因為 Rich Editor 目前沒支援 pre 跟 code 的 HTML tag ,所以這邊要用 HTML 編輯自行添加下面的 tag。

<pre><code class="html">...</code></pre>

其中 ... 可以替換成想要顯示的原始碼,另外為了避免無法正常顯示 html tag ,最好使用 HTML Escape 符號,這邊推薦使用 HTML Escape / Unescape 的服務。

留言

這個網誌中的熱門文章

執行 StrongLifts 5x5 三個月心得

第一次教召就上手

2018 公司內部敏捷開發調訓