靴釦丁: 【JQ】jQuery Syntax Highlighter // 部落格中的程式碼區塊

雖然SyntaxHighlighter是程式區塊的老大，但是使用其為基礎而延伸的

jQuery Syntax Highlighter卻比較深得我心，因為它可以自動偵測語言，方便很多。

名稱：jQuery Syntax Highlighter
網站：DEMO
說明：在部落格顯示bsh, c, cc, cpp, cs, csh, cyc, cv, htm, html, java, js, m, mxml, perl, pl, pm, py, rb, sh, xhtml, xml, xsl的程式碼區塊。

『如何在Blogger使用jQuery Syntax Highlighter』

Step1：把以下程式碼放入範本中。

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

(把程式碼放在<head></head>中間後儲存)

Step2：編輯文章時，在HTML模式下把要顯示的程式碼向這樣子放入，就完成了。

<pre class="highlight">
//程式碼.....
</pre>

不需要打上程式碼類型它就會自動偵測，測試下來還蠻準的。

靴釦丁

2014/03/10

【JQ】jQuery Syntax Highlighter // 部落格中的程式碼區塊

『如何在Blogger使用jQuery Syntax Highlighter』

沒有留言:

張貼留言