愈來愈多人在自己的部落格分享程式,但是分享程式時,都希望程式能夠自動上色,讓使用者更好懂。海芋之前教過「使用 SyntaxHighlighter 插入美觀的程式碼」,但那篇文章要匯入的東西太多,反而讓人望之怯步,不過在一翻搜尋後,海芋終於找到另一個插入程式碼的教學,同樣是以「Syntax Highlighter」為基底,但是是用 JQuery 的方式載入,而且有自動偵測語法的功能,我想對於一般人來說是比較友善的。

首先,先在要插入美觀程式碼的網頁中,插入以下的程式碼。

     

之後,將要在網站顯示的程式碼,用下列的語法包起來就可以啦!

要顯示的的程式碼…

至於程式碼的上色問題,則是會由 JQuery 的程式去自動偵測程式語言語法,並且依該語法上色,偵測的結果還蠻準的唷!

資料來源:http://balupton.github.io/jquery-syntaxhighlighter/demo/#using

Written by 

城市裡的小小迷僮工程師,喜歡用鍵盤記錄個人生活的點滴,身邊的人事物都我的靈感,用心踏出每個腳步,用文字灌溉《海芋小站》,用專業解決問題。

發表迴響