ブログ上でのソースコード表示に便利な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 の場合は、ソースコード内で不等号記号(< >),ダブルクォート("),空白( )などは
エスケープしなくても表記が可能。
上記のように SyntaxHighlighter の書式を書くとき [ ([)と ] (]) はアスキーコードで書く必要がある。
[ ] を使うときは誤変換されないように注意しなければならない。
参考:特殊文字とアスキーコード
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 と同じように使える。