how to add code highlight in new version of Blogger 如何在新版的 Blogger 中上色程式碼

如果要在 Blogger 中將程式碼排版並上色，需要安裝第三方的工具

Resolution 解決方案

1. Open "Theme" >  click arrow from "CUSTOMIZE" menu > "Edit HTML"

打開 "主題" >  點擊"自訂"旁的箭頭 > "編輯 HTML"

 

 2.add code below after </title> tag then click save button

在 </title> 標籤後面加入以下的程式碼後按下儲存按鈕

<title><data:blog.pageTitle/></title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.0/styles/agate.min.css"></link>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.2.0/highlight.min.js'></script>
<script>hljs.initHighlightingOnLoad();</script>    

3. in "HTML view" mode, add your code between <pre><code> and </pre></code>

在 "HTML 檢視" 模式中，將程式碼放在在標籤<pre><code> 與 </pre></code> 的中間

 

Reference 參考

https://therealweblog.blogspot.com/2019/05/how-to-format-code-snippets-in-blogger.html