かえでBlog

色々なことを徒然と……

【WordPress】SyntaxHighlighter Evolvedの使い方

      2015/05/18

SyntaxHighlighter Evolvedとはプログラムのソース表示の再に予約語等の特定文字を色で表示してくれたり、行数を表示してくれるWordPressのプラグインです。

2013年8月17日時点でのバージョンは 3.1.7になります。


対象言語

ハイライト表示してくれる言語は以下の通りです。

言語 ハイライト指定文字 使用JSファイル
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

使い方

[ハイライト指定文字]プログラムを記述[/ハイライト指定文字]

[html]
<html>
<head>
<title>テスト</test>
</head>
<body>
テスト
<input type="text" name="test" value="テスト文字"/>
</body>
</html>
[/html]

 


使い方(拡張機能)

[ハイライト指定文字 拡張機能]という使い方で表示方法を指定できます。

特定行の背景色を変更する

highlight="行数(半角数字)"(カンマ区切りで複数行指定可能)

1行目
2行目(背景変更)
3行目
4行目(背景変更)

指定行から表示する

firstline="行数(半角数字)"

行数を15行目から表示

行数を非表示にする

gutter="false"

行数の非表示

折り畳んだ状態で表示する

collapse="true"

 折りたたんで表示

タブ幅の数値を変更

tabsize="タブ幅(数値)"

	標準のタブ
	tabsize="20"でのタブ

URLの自動リンク解除

autolinks=”false”

<a href="http://kaede.jp">自動リンクあり</a>
<a href="http://kaede.jp">自動リンクなし</a>

ルーラーの表示(特に関係ない?)

ruler="true"

ルーラーの表示

シンプル表示

light="true"

シンプル表示

 - WordPress , ,