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

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

<!-- Include jQuery (Syntax Highlighter Requirement) -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- Include jQuery Syntax Highlighter -->
<script type="text/javascript" src="http://balupton.github.com/jquery-syntaxhighlighter/scripts/jquery.syntaxhighlighter.min.js"></script>
<!-- Initialise jQuery Syntax Highlighter -->
<script type="text/javascript">$.SyntaxHighlighter.init();</script>

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

要顯示的的程式碼…

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

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

Written by 

小小的宅宅電腦工程師,從小就是吃草族,用鍵盤寫下我在電腦上的足跡,用照片記錄下我的生活日常,用文字與大家交朋友~

2 thoughts on “如何在網頁中插入美觀的程式碼?以「jQuery Syntax Highlighter」為例教學”

發表迴響