在新版Blogger網頁中顯示語法高亮的程式碼（syntax highlight）
在新版Blogger網頁中顯示語法高亮的程式碼的方法如下，本篇使用Prism.js來顯示語法高亮，
使用Prism來顯示語法高亮的程式碼
Prism顯示語法高亮的程式碼效果如下：
var person = {
firstname: 'Jeremy',
lastname: 'Lin',
getFullName: function(){
var fullname = this.firstname + ' ' + this.lastname;
return fullname;
}
}
下載Prism
到Prism網站選擇DEFAULT主題，然後按DOWNLOAD下載程式碼，然後開始客製化一些功能，也可以直接跳過這步開始下載，
JS的部份
"版面配置>側欄（頂端）>新增小工具>HTML/JavaScript新增"
內容貼上剛剛下載的JS部份，記得要勾選"顯示「 HTML/JavaScript 」"
CSS 部份
直接使用 unpkg.com 提供的連結，這邊選擇Prism相同版本的 1.23，貼到Blogger的<head>與</head>之間，我是貼在head區域裡的<title>之前，
"主題>(下拉選單)編輯HTML"
<head>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<!-- prism -->
<link href='https://unpkg.com/prismjs@1.23.0/themes/prism.css' rel='stylesheet'/>
<title><data:view.title.escaped/></title>
<b:include data='blog' name='all-head-content'/>
特殊的程式碼會跟html衝突怎麼辦？
如果有要貼什麼<>這樣的標籤語法的話會跟原本的html衝突，所以要先轉碼再貼上，可以透過HTML Encoder來轉碼。
結束收工。
Prism.js參考
[技術分享] 寫給會在部落格中撰寫程式碼的你 ─ 在網頁中嵌入高亮程式碼上色 (syntax highlighting) ~ PJCHENder<br>那些沒告訴你的小細節
使用 Prism.js 實現漂亮的代碼語法高亮
highlight.js參考
使用highlight.js
JavaScript - Highlight.js：簡單好用的程式碼上色工具 - Twincl
留言
張貼留言