カテゴリー表示モード:標準 | RC2

ホーム > JavaScript | WEB | WordPress > SyntaxHighlighter Evolved 導入

SyntaxHighlighter Evolved 導入

ブログ上でのソースコード表示に便利なJavaScript「SyntaxHighlighter
色々と種類がある中で、WordPress のプラグインの  SyntaxHighlighter Evolved ver2.1.0 を導入。

参考:Bois Creative Homepage 「SyntaxHighlighter 2.0をMovableType4.25で使ってみる

使い方
コード部分の記述はソースにあった記述で囲う。

<pre class="brush:xml">
</pre>

または、

[php] PHP用ソースコード [/php]
[css] CSS用ソースコード [/css]
[code lang="js"] ソースコード [/code]
[sourcecode language="plain"] ソースコード [/sourcecode]
[tag light="true"] ライトモード [/tag]

brush , lang , language にコードの言語を指定します。使用可能言語は下記表参照。
Evolved の場合は、ソースコード内で不等号記号(&lt; &gt;),ダブルクォート(&quot;),空白(&nbsp;)などは
エスケープしなくても表記が可能。
上記のように SyntaxHighlighter の書式を書くとき [ (&#91;)と ] (&#93;) はアスキーコードで書く必要がある。
[ ] を使うときは誤変換されないように注意しなければならない。
参考:特殊文字とアスキーコード

各言語の brush と対応JavaScript(SyntaxHighlighter ver.2.0.320 より)
Brush name Brush aliases File name
ActionScript3 as3, actionscript3 shBrushAS3.js
Bash/shell bash, shell shBrushBash.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
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

各パラメータの説明
参考:公式サイト 「SyntaxHighlighter.defaults
参考:OH! さんきゅう堂的_STYLE 「WordPress SyntaxHighlighter Plus 開始行番号他

他の SyntaxHighlighter との互換性を保つ為、<pre>タグと[code]の両例を記す。

PRE 例1)

<pre class="brush:xml;
 first-line: 10;          /*開始行番号指定*/
 highlight: [15,16];      /*強調ライン指定(複数可)*/
 wrap-lines:false;        /*自動折返し無し*/
 auto-links:false;        /*URLオートリンク無し*/
 
 
">ソースコード</pre>

PRE 例2)

<pre class="brush:xml;
 ruler: true;                   /*ルーラー表示*/
 toolbar: false;                /*ツールバー無し*/
 gutter: false;                 /*行番号無し*/
">ソースコード</pre>

CODE 例1)

[code lang="xml"
 firstline="10"          /*開始行番号指定*/
 highlight="15,16"       /*強調ライン指定(複数可)*/
 wraplines="false"       /*自動折返し無し*/
 autolinks="false"       /*URLオートリンク無し*/
 
 
]ソースコード[/code]

CODE 例2)

[code lang="xml"
 ruler="true"                  /*ルーラー表示*/
 toolbar="false"               /*ツールバー無し*/
 gutter="false"                /*行番号無し*/
]ソースコード[/code]

あまり使う用途が見つからないもの。

 collapse: true;                /*折り畳み*/
 light: true;                   /*シンプル表示*/
 class-name: 'class'            /*CSSのclass適用*/
 html-script: true;             /*HTML/XML混合用*/

記述の違いは多少あるもののベースの SyntaxHighlighter ver2.0 と同じように使える。