Archive

‘CSS’ 分類過的Archive

SyntaxHighlighter使程式語法清楚顯示

2010年1月22日 尚無評論

最近又想到要在文章中顯示程式時,如果要顯示CSS、ASP、PHP等等的語法時,可以不用自己去打上各個顏色的html code,所以找回了之前用過的SyntaxHighlighter,但這在Google裡的程式版本應該是很舊的了
現在已經有新版

這裡整理給自己做個筆記~

下載點:http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download

安裝:
下載後,解壓縮到網站目錄下,例如:/網站目錄/js/syntaxhighlighter

設定:

在<head>…</head>區中加入css設定

<head>
<link href="/js/syntaxhighlighter/styles/shCore.css" type="text/css" rel="stylesheet" />
<link href="/js/syntaxhighlighter/styles/shThemeDefault.css" type="text/css" rel="stylesheet" />
</head>

再來是js的添加,可以放在最後再載入,以確保在內容載入後才執行

<!-- 必要項 -->
<script type="text/javascript" src="/js/syntaxhighlighter/scripts/shCore.js"></script>
<!-- 底下是一般常用的 -->
<script type="text/javascript" src="/js/syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="/js/syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="/js/syntaxhighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="/js/syntaxhighlighter/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="/js/syntaxhighlighter/scripts/shBrushVb.js"></script>
<!-- xml是包含了html的格式 -->
<script src="/js/syntaxhighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript">
<!-- 這個是載入複製用的flash,要是不載入也沒關係,同時也不會出現複製功能的按鈕 -->
SyntaxHighlighter.config.clipboardSwf = "/js/syntaxhihglighter/scripts/clipboard.swf";
<!-- 執行js使設定啟用 -->
SyntaxHighlighter.All();
</script>

使用:

Categories: CSS, HTML, JavaScript Tags: