將以下內容貼至範本Html的head中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!--SYNTAX HIGHLIGHTER BEGINS1--> < link href = "//alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel = "stylesheet" type = "text/css" > < link href = "//alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel = "stylesheet" type = "text/css" > < script src = "//alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type = "text/javascript" ></ script > < script src = "//alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type = "text/javascript" ></ script > < script src = "//alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type = "text/javascript" ></ script > < script language = "javascript" > SyntaxHighlighter.defaults['toolbar']=false; //隱藏問號按鈕,建議隱藏,否則可能會產生bug。 SyntaxHighlighter.defaults['class-name']='highlightsetting'; //自定義CSS設置開放 SyntaxHighlighter.defaults['auto-links']=false; //讓超連結顯示為普通文字 SyntaxHighlighter.config.space=' '; //修復Google Chrome複製程式碼時變成空白的bug SyntaxHighlighter.config.stripBrs=false; //忽略Blogger的標籤 SyntaxHighlighter.all(); </ script > <!--SYNTAX HIGHLIGHTER ENDS--> |
1 2 | < pre class="brush: <!--語法代號--> "> //程式碼內容 </ pre > |
如果需要不同語法支援,在Head中加入
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | < script src = "//alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js" type = "text/javascript" ></ script > < script src = "//alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js" type = "text/javascript" ></ script > < script src = "//alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js" type = "text/javascript" ></ script > < script src = "//alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type = "text/javascript" ></ script > < script src = "//alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" type = "text/javascript" ></ script > < script src = "//alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" type = "text/javascript" ></ script > < script src = "//alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js" type = "text/javascript" ></ script > < script src = "//alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js" type = "text/javascript" ></ script > < script src = "//alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js" type = "text/javascript" ></ script > < script src = "//alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js" type = "text/javascript" ></ script > < script src = "//alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type = "text/javascript" ></ script > < script src = "//alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type = "text/javascript" ></ script > < script src = "//alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js" type = "text/javascript" ></ script > < script src = "//alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js" type = "text/javascript" ></ script > < script src = "//alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" type = "text/javascript" ></ script > < script src = "//alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js" type = "text/javascript" ></ script > < script src = "//alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js" type = "text/javascript" ></ script > < script src = "//alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" type = "text/javascript" ></ script > < script src = "//alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js" type = "text/javascript" ></ script > < script src = "//alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js" type = "text/javascript" ></ script > < script src = "//alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js" type = "text/javascript" ></ script > < script src = "//alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type = "text/javascript" ></ script > < script src = "//alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type = "text/javascript" ></ script > |
程式碼代碼
程式名稱
|
縮寫
|
ActionScript3
|
as3, actionscript3
|
Bash/shell
|
bash, shell
|
ColdFusion
|
cf, coldfusion
|
C#
|
c-sharp, csharp
|
C++
|
cpp, c
|
CSS
|
css
|
Delphi
|
delphi, pas, pascal
|
Diff
|
diff, patch
|
Erlang
|
erl, erlang
|
Groovy
|
groovy
|
JavaScript
|
js, jscript, javascript
|
Java
|
java
|
JavaFX
|
jfx, javafx
|
Perl
|
perl, pl
|
PHP
|
php
|
Plain Text
|
plain, text
|
PowerShell
|
ps, powershell
|
Python
|
py, python
|
Ruby
|
rails, ror, ruby
|
Scala
|
scala
|
SQL
|
sql
|
Visual Basic
|
vb, vbnet
|
XML
|
xml, xhtml, xslt, html, xhtml
|
以下為特殊用法
SyntaxHighlighter.config
SyntaxHighlighter.config
has configuration values that are common to all highlighted elements on the page and don’t make much sense within context of a single highlighted element. Below are these values:Name | Value | Description |
---|---|---|
bloggerMode | false | Blogger integration. If you are hosting on blogger.com, you must turn this on. |
strings | Object | Allows you to change default messages, see here for more details. |
stripBrs | false | If your software adds <br /> tags at the end of each line, this option allows you to ignore those. |
tagName | "pre" | Facilitates using a different tag. |
Example
1
2
| SyntaxHighlighter.config.bloggerMode = true ; SyntaxHighlighter.all(); |
SyntaxHighlighter.defaults
SyntaxHighlighter.defaults
holds all default values for each highlighted element on the page. These options are local to each highlighter element and could be changed individually via parameters described in the next section. The list below represent a full list of options that SyntaxHighlighter supports:Name | Value | Description |
---|---|---|
auto-links | true | Allows you to turn detection of links in the highlighted element on and off. If the option is turned off, URLs won’t be clickable. Click here for a demo. |
class-name | '' | Allows you to add a custom class (or multiple classes) to every highlighter element that will be created on the page. Click here for a demo. |
collapse | false | Allows you to force highlighted elements on the page to be collapsed by default. Click here for a demo. |
first-line | 1 | Allows you to change the first (starting) line number. Click here for a demo. |
gutter | true | Allows you to turn gutter with line numbers on and off. Click here for a demo. |
highlight | null | Allows you to highlight one or more lines to focus user’s attention. When specifying as a parameter, you have to pass an array looking value, like [1, 2, 3] or just an number for a single line. If you are changing SyntaxHighlighter.defaults['highlight'] , you can pass a number or an array of numbers. Click here for a demo. |
html-script | false | Allows you to highlight a mixture of HTML/XML code and a script which is very common in web development. Setting this value to true requires that you have shBrushXml.js loaded and that the brush you are using supports this feature. Click here for a demo. |
smart-tabs | true | Allows you to turn smart tabs feature on and off. Click here for a demo. |
tab-size | 4 | Allows you to adjust tab size. Click here for a demo. |
toolbar | true | Toggles toolbar on/off. Click here for a demo. |
Example
1
2
3
4
| SyntaxHighlighter.defaults[ 'gutter' ] = false ; SyntaxHighlighter.defaults[ 'smart-tabs' ] = false ; ... SyntaxHighlighter.all(); |
Parameters
Parameters allow you to customize a single highlighted element to your liking. Key/value pairs are specified in the format similar to CSS, but instead of the style node attribute, they go together with the brush declaration into the class attribute.
In such fashion, you can change any default value from the
SyntaxHighlighter.defaults
.Example
1
| <pre class= "brush: js; ruler: true; first-line: 10; highlight: [2, 4, 6]" >...</pre> |
沒有留言 :
張貼留言