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

Tweet

如果你喜歡在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>包起來即可，如以下的範例。

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

詳細的程式語法，可以去「官方的Brush列表」看。

Tweet

版權說明

本文章發佈於海芋小站，內容僅歡迎「部份」引用，引用時請註明出處及原文連結，謝謝。
若圖像無法顯示，可能因流量太大，敬請重新整理或透過留言與我回報，也歡迎「訂閱」本站文章喔，感恩!!