在 Blogger 或網站中插入美觀的程式碼 ~ 使用 syntaxhighlighter 3.0 實戰

如果你喜歡在Blogger中分享程式碼,那麼你一定不可以錯過「syntaxhighlighter」這個工具,他可以讓你在你的Blogger中,排出漂亮的程式碼,另外支援列印等功能,可以說是相當地實用喔!

 

Step 1.
首先,先去SyntaxHiglighter的官方下載網頁,下載此一壓縮包,或者直接按此連結下載。而下載後,請將裡面的「Scripts」內的所有檔案,都上傳至您的網頁空間。

 

Step 2.
接著,繼續加入下列程式碼,其中yoursite是指你的網址。

<link type="text/css" rel="stylesheet" href="yoursite/shCore.css"/>
<link type="text/css" rel="stylesheet" href="yoursite/shThemeDefault.css" id="shTheme"/>
<script type="text/javascript" src="yoursite/shCore.js"></script>
<script type="text/javascript" src="yoursite/shBrushBash.js"></script>
<script type="text/javascript" src="yoursite/shBrushCpp.js"></script>
<script type="text/javascript" src="yoursite/shBrushCSharp.js"></script>
<script type="text/javascript" src="yoursite/shBrushCss.js"></script>
<script type="text/javascript" src="yoursite/shBrushDelphi.js"></script>
<script type="text/javascript" src="yoursite/shBrushDiff.js"></script>
<script type="text/javascript" src="yoursite/shBrushGroovy.js"></script>
<script type="text/javascript" src="yoursite/shBrushJava.js"></script>
<script type="text/javascript" src="yoursite/shBrushJScript.js"></script>
<script type="text/javascript" src="yoursite/shBrushPhp.js"></script>
<script type="text/javascript" src="yoursite/shBrushPlain.js"></script>
<script type="text/javascript" src="yoursite/shBrushPython.js"></script>
<script type="text/javascript" src="yoursite/shBrushRuby.js"></script>
<script type="text/javascript" src="yoursite/shBrushScala.js"></script>
<script type="text/javascript" src="yoursite/shBrushSql.js"></script>
<script type="text/javascript" src="yoursite/shBrushVb.js"></script>
<script type="text/javascript" src="yoursite/shBrushXml.js"></script>
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

 

Step 3.
再找到模版中所有有關「code」的css程式碼,並且去掉,並且儲存模版。

Step 4.
而要使用的話,只要用將程式碼用「<pre class="brush: 程式語法;"></pre>」 包起來。如以下的範例。至於詳細的程式語法,可以去「官方的Brush列表」看。

<pre class="brush: html;">
<p>this is a test</p>
</pre>

About 張海芋

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

發表迴響