如何在Blogger上安裝高亮程式碼 - SyntaxHighlighter?

print("你也想要在你的網站上用高亮程式碼嗎?") 


當你想在你的部落格寫下有關於程式碼的東西,你會不會也想要跟在IDE(整合開發環境)上一樣文字會造語法變色呢?或者當你要發表你的程式作品,你要寫下API程式碼時候,是不是想要讓程式碼更能輕易辨識呢?其實,這一切可以很簡單!

我們可以使用自由資源SyntaxHighlighter還幫我們達成這件事:




SyntaxHighlighter

官方網站:http://alexgorbatchev.com/SyntaxHighlighter/

Tipe:我們不提供下載連結是因為這裡不需要,可以使用官方提供能外接檔案來達成安裝。如果您有需要可以點這裡進入下載頁面。 




這個教學的範例雖然是Blogger,但依然可以使用在網頁上或其他部落格上。
還有,因為我們的示範是用SyntaxHighlighter提供的外接檔案,如果你擔心會掛掉,你可以自己做一份放主機上,並且把外接網址換成你的主機的網址。

好的,那我們開始吧!



第一步:首先,請進入Blogger打開,進入控制版面的「範本」設定,點擊「網誌即時狀態」的「HTML編輯」



第二步:請你找到<head></head>這個HTML,並且把以下三行指令找個地方放進去。建議放在</head>記號的上方(也就是head的最後面)。放入後請選「儲存範本」。






這個是我的Blogger的HTML,我把那三段放在head裡。





第三步:儲存範本完後,請點選「版面配置」。在裡頭隨便選一個位置「新增小工具」。你會看到這個畫面後,請選擇




第四步:請把以下這個Code放入文字框裡,並且按儲存:



請注意:標題必須空白,否則會在網頁上出現內容!
還有,獅子測試過將此程式碼放入佈景的XML檔中,卻會出現莫名的語法錯誤。所以建議各位還是放在小工具裡比較保險。
基本上,這樣就大功告成了!  

 

如何使用它?  
 
其實用這個就比較麻煩的地方是需要切換到HTML模式下打下這段Code:


那麼?我要怎麼知道我的Code種類代碼? 這裡有份資料,你可以從這裡對照您的程式碼種類的代碼。
Tipe:在Blogger編輯文章的時候,並不會看見高亮程式碼,必須在網站發布(不是預覽)的狀態下才會看見。

這樣就完成啦!是不是很簡單呢?其實目前獅子還在研究如果更簡化這個系統

喜歡3C科技,常常自己坐在電腦前玩APP與寫程式。目前是個全職高中生,課餘的時間就會來3C玩物學堂寫寫文章,分享各種3C科技資訊。

社群分享

文章推薦

Previous
Next Post »