[Blog] Xuite上安裝SyntaxHighlighter

這麼帥氣的程式碼Hightlight功能要怎麼在 Xuite 的部落格上實現呢? 下文會教你怎麼把 SyntaxHightLighter 套件裝上你的Xuite部落格中。

【1】進入 Xuite 的 管理後台\編排欄位。如果，你已經有使用自由欄位的話，那就選擇修改已經存在的自由欄位，否則選擇新增一個自由欄位。

【2】在自由欄位中貼上以下必要程式碼。

<script type="text/javascript" src="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shCore.js"></script>
<link href="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shCore.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
     SyntaxHighlighter.all()
</script>

【3】選擇自己所想要的程式碼表現樣式(挑選一種樣式對應之程式碼貼上即可)。

。Default

<link href="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />

圖例: 

。Django

<link href="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shThemeDjango.css" rel="stylesheet" type="text/css" />

圖例:

。Eclipse

<link href="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shThemeEclipse.css" rel="stylesheet" type="text/css" />

圖例:

。Emacs

<link href="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shThemeEmacs.css" rel="stylesheet" type="text/css" />

圖例:

。Fade To Grey

<link href="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shThemeFadeToGrey.css" rel="stylesheet" type="text/css" />

圖例:

。Midnight

<link href="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shThemeMidnight.css" rel="stylesheet" type="text/css" />

圖例:

。RDark

<link href="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/styles/shThemeRDark.css" rel="stylesheet" type="text/css" />

圖例:



【4】選擇你所需要的程式語言模組。(修改程式碼貼上即可)(可多選)
<script type="text/javascript" src="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/+模組檔名"></script>

shLegacy.js
shCore.js
shBrushXml.js
shBrushVb.js
shBrushSql.js
shBrushScala.js
shBrushSass.js
shBrushRuby.js
shBrushPython.js
shBrushPowerShell.js
shBrushPlain.js
shBrushPhp.js
shBrushPerl.js
shBrushJScript.js
shBrushJavaFX.js
shBrushJava.js
shBrushGroovy.js
shBrushErlang.js
shBrushDiff.js
shBrushDelphi.js
shBrushCss.js
shBrushCSharp.js
shBrushCpp.js
shBrushColdFusion.js
shBrushBash.js
shBrushAS3.js
shBrushAppleScript.js
shAutoloader.js

例如:

<script type="text/javascript" src="http://alexgorbatchev.com.s3.amazonaws.com/pub/sh/3.0.83/scripts/shBrushPhp.js"></script>

【5】使用方法。

在 brush: 後面加上自己所想要表示的程式語言即可。(ex: js, php, xml, vb, csharp, cpp, java, ...)

<pre class="brush: php">
    <?php
        echo "Hello SyntaxHightLighter!!";
        phpinfo();
    ?>
</pre>