2014年3月7日 星期五

Blogger安裝SyntaxHighlighter格式化代碼

Blogger放上代碼,會發現在編排上,是一個很大的困難,無法依照原本IDE上的格式輸出,此時可以藉助SyntaxHighlighter,來格式化代碼,顯示語法高亮度,並支援多種程式語言,讓我們更有效率地閱讀代碼,容易理解所要表達的意義,直接從範本上著手安裝。



網站名稱:SyntaxHighlighter
網站地址:http://alexgorbatchev.com/SyntaxHighlighter/
支援語言:http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

  1. 範本。
  2. 編輯HTML。





Ctrl+F,搜尋這段代碼。

</head>



發現這段代碼。




在</head>之前,加入以下代碼,然後儲存範本。

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>



代碼加入之後的結果。




而文章內的部份,就必須使用<pre></pre>標示,並以class屬性註明,要顯示的程式語言,如使用HTML格式:

<pre class="brush: html">
<p>Hello blog.openyu.org</p>
<h3>Blog透視鏡 ,提供了Blog代碼範例,文章和教學,可以幫助你建置部落格。</h3>
</pre>



原本的代碼,經過格式化後,就顯得比較容易閱讀了。




支援程式語言的列表,可以參考如下:
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

由於Mix還不需要那麼多的程式語言格式,所以只載入了SQL,XML,與Java等js檔,可以減少網頁載入的負擔,使用的js如下:

  1. shBrushJava.js
  2. shBrushSql.js
  3. shBrushXml.js

你也可以先挑幾種常用程式語言格式的使用,待日後有需要再加上js的連結即可,



沒有留言:

張貼留言