SyntaxHighlighter代碼加色使用方法

時間 2019-11-17

標籤 syntaxhighlighter 代碼加色使用方法简体版

原文原文鏈接

SyntaxHighlighter是一款用於web頁面的代碼高亮着色工具，能夠用來着色多種語言，能讓你的代碼在網頁上以相似IDE編輯器裏的樣子高亮關鍵字，能夠是HTML,CSS,Javascript,還能夠是C,JAVA等編程語言。最先見於Yahoo的YUI，當時還屬於自由軟件，最近打開官方網站發現已被goolge收編。

官網： http://about.me/alexgorbatchev
下載地址： http://alexgorbatchev.com/SyntaxHighlighter/
或 http://code.google.com/p/syntaxhighlighter/
演示地址： http://alexgorbatchev.com/SyntaxHighlighter/manual/demo/

它能夠在網頁中對各類程序源代碼語法進行加亮顯示。支持當前流行的各類編程語言：C#、CSS、C++、Delphi、Java、JavaScript、PHP、Python、Ruby、SQL、Visual Basic、XML / HTML 。

具體用法：

在代碼前根據代碼語言的不一樣加上不一樣的[%Lang]在代碼後加上[/%Lang]，%Lang = 你用的語言對應的Brush aliases（具體對應羅列於下）。例如[@cpp]#include <stdio.h>[/cpp]（@去掉）。
或者只用一次%Lang，[@code lang=%Lang]你的代碼[/code]或者[@source lang=%Lang]你的代碼[@source lang=%Lang]，其中lang均可以換成language。

點擊Brush name 有官方網站的詳細介紹和Demo，有興趣的童鞋能夠去看看。對於技術類的博客來講，這種語法高亮插件是必不可少的。 javascript

Brush name	Brush aliases	File name
ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.js
ColdFusion	cf, coldfusion	shBrushColdFusion.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Erlang	erl, erlang	shBrushErlang.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
JavaFX	jfx, javafx	shBrushJavaFX.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
PowerShell	ps, powershell	shBrushPowerShell.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
Scala	scala	shBrushScala.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js

該工具核心基於javascript，使用起來很簡單：

一、假設網頁文件test.htm存放在一個目錄，將dp.SyntaxHighlighter解壓縮，並複製其中的Scripts文件夾和styles文件夾，確保和test.html在同一個目錄下面。
二、在網頁的<head></head>之間插入如下代碼：
<link type="text/css" rel="stylesheet" href="Styles/SyntaxHighlighter.css"></link>
三、在網頁要顯示程序源代碼的地方插入如下代碼，如果HTML類型的話，用XML（其它的如class="js"表示以js語法顯示源代碼，其餘可設定的class值分別爲c#、css、c、elphi、java、js、php、python、ruby、sql、vb、xml）：
<textarea name="code" class="js" rows="15" cols="100">
程序源代碼放在這兒
</textarea>
說明：
name="code"是必須的，不能更改；
class="xml"是着色的方式，即須要着色的代碼的類型，根據須要進行更改。
四、在網頁尾部的</body>以前插入如下代碼：

<script class="javascript" src="Scripts/shCore.js"></script> 
<script class="javascript" src="Scripts/shBrushCSharp.js"></script> 
<script class="javascript" src="Scripts/shBrushPhp.js"></script> 
<script class="javascript" src="Scripts/shBrushJScript.js"></script> 
<script class="javascript" src="Scripts/shBrushJava.js"></script> 
<script class="javascript" src="Scripts/shBrushVb.js"></script> 
<script class="javascript" src="Scripts/shBrushSql.js"></script> 
<script class="javascript" src="Scripts/shBrushXml.js"></script> 
<script class="javascript" src="Scripts/shBrushDelphi.js"></script> 
<script class="javascript" src="Scripts/shBrushPython.js"></script> 
<script class="javascript" src="Scripts/shBrushRuby.js"></script> 
<script class="javascript" src="Scripts/shBrushCss.js"></script> 
<script class="javascript" src="Scripts/shBrushCpp.js"></script> 
<script class="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>

一個頁面裏面能夠包含任意多個須要着色的代碼段；
壓縮包中有各類着色代碼類型的着色案例，你們能夠參照使用。

1. 首先在頁面上添加以下代碼（假設下載後的SyntaxHighlighter放在SyntaxHighlighter目錄下面，注意目錄結構）：

<script language="javascript"> </script>

官方的安裝中沒有window.onload，我想這個仍是須要的，畢竟，頁面加載的時候我就須要給代碼着色。

<link type="text/css" rel="stylesheet" href="SyntaxHighlighter/Styles/SyntaxHighlighter.css"></link>
<script language="javascript" src="SyntaxHighlighter/Scripts/shCore.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushCSharp.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script language="javascript">
window.onload = function () {
dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
}
</script>

2. 使用方法以下：

方法一：使用pre

<pre name="code" class="c-sharp">
... some code here ...
</pre>

方法二：使用textarea

<textarea name="code" class="c#" cols="60" rows="10">
... some code here ...
</textarea>

另外，這裏還有一些高級特性的設置方法可供參考，諸如代碼摺疊等。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。