WordPress で SyntaxHighlighter Evolved を使ってソースコードをハイライトする

技術ブログを書くならソースコードを言語ごとにシンタックスハイライトしたいですよね! WordPress なら …

技術ブログを書くならソースコードを言語ごとにシンタックスハイライトしたいですよね!
WordPress なら SyntaxHighlighter Evolved というプラグインを導入することによって
ソースコードを綺麗にハイライト表示させることができます。

書き方

書き方は簡単で、テキストエディタ( HTML モード)で以下のように記述するだけです。

[code language="alias"]
your code here
[/code]

alias には以下の対応言語のエイリアスを入力すればソースコードの言語を指定することができます。

対応言語

言語名 エイリアス
ActionScript3 actionscript3
Bash/shell bash, shell
Clojure clojure
ColdFusion coldfusion
C/C++ c, cpp
C# csharp
CSS css
Delphi delphi
Erlang erlang
F# fsharp
Diff diff
Groovy groovy
HTML html
JavaScript js, javascript
Java java
JavaFX javafx
MATLAB matlab (keywords only)
Objective-C objc
Perl perl
PHP php
Text text
PowerShell powershell
Python python
R r
Ruby ruby
Scala scala
SQL sql
Visual Basic vb
XML xml

設定パラメータ

以下の設定パラメータを指定することによって表示を変えることができます。

パラメータ名 設定値 デフォルト 説明
autolinks true/false true URLをリンクに変換します
collapse true/false false ページ表示時にソースコードを短縮表示します
firstline number 1 開始行の数字を変更します
gutter true/false true 行番号を表示します
highlight カンマ区切りの数字 指定した行をハイライト表示します
htmlscript true/false false コード内の HTML/XML をハイライト表示します
light true/false false 行番号とツールバーを非表示にします
padlinenumbers true/false/integer 行番号の zero-padding を設定することができます
title string ソースコードをにタイトルを表示します

設定例を以下に表示しています。

[code lang="html" autolinks="false"]
<a href="http://tokyo.supersoftware.co.jp/?p=1662">
WordPress で SyntaxHighlighter Evolved を使ってソースコードをハイライトする
</a>
[/code]
<a href="http://tokyo.supersoftware.co.jp/?p=1662">
WordPress で SyntaxHighlighter Evolved を使ってソースコードをハイライトする
</a>

collapse

[code lang="html" collapse="true"]
<a href="http://tokyo.supersoftware.co.jp/?p=1662">
WordPress で SyntaxHighlighter Evolved を使ってソースコードをハイライトする
</a>
[/code]
<a href="http://tokyo.supersoftware.co.jp/?p=1662">
WordPress で SyntaxHighlighter Evolved を使ってソースコードをハイライトする
</a>

firstline

[code lang="html" firstline="10"]
<a href="http://tokyo.supersoftware.co.jp/?p=1662">
WordPress で SyntaxHighlighter Evolved を使ってソースコードをハイライトする
</a>
[/code]
<a href="http://tokyo.supersoftware.co.jp/?p=1662">
WordPress で SyntaxHighlighter Evolved を使ってソースコードをハイライトする
</a>

gutter

[code lang="html" gutter="false"]
<a href="http://tokyo.supersoftware.co.jp/?p=1662">
WordPress で SyntaxHighlighter Evolved を使ってソースコードをハイライトする
</a>
[/code]
<a href="http://tokyo.supersoftware.co.jp/?p=1662">
WordPress で SyntaxHighlighter Evolved を使ってソースコードをハイライトする
</a>

highlight

[code lang="html" highlight="2"]
<a href="http://tokyo.supersoftware.co.jp/?p=1662">
WordPress で SyntaxHighlighter Evolved を使ってソースコードをハイライトする
</a>
[/code]
<a href="http://tokyo.supersoftware.co.jp/?p=1662">
WordPress で SyntaxHighlighter Evolved を使ってソースコードをハイライトする
</a>

htmlscript

[code lang="php" htmlscript="true"]
<a href="http://tokyo.supersoftware.co.jp/?p=1662">
<?php echo "WordPress で SyntaxHighlighter Evolved を使ってソースコードをハイライトする"; ?>
</a>
[/code]
<a href="http://tokyo.supersoftware.co.jp/?p=1662">
<?php echo "WordPress で SyntaxHighlighter Evolved を使ってソースコードをハイライトする"; ?>
</a>

light

[code lang="html" light="true"]
<a href="http://tokyo.supersoftware.co.jp/?p=1662">
WordPress で SyntaxHighlighter Evolved を使ってソースコードをハイライトする
</a>
[/code]
<a href="http://tokyo.supersoftware.co.jp/?p=1662">
WordPress で SyntaxHighlighter Evolved を使ってソースコードをハイライトする
</a>

padlinenumbers

[code lang="html" padlinenumbers="3"]
<a href="http://tokyo.supersoftware.co.jp/?p=1662">
WordPress で SyntaxHighlighter Evolved を使ってソースコードをハイライトする
</a>
[/code]
<a href="http://tokyo.supersoftware.co.jp/?p=1662">
WordPress で SyntaxHighlighter Evolved を使ってソースコードをハイライトする
</a>

title

[code lang="html" title="WordPress で SyntaxHighlighter Evolved を使ってソースコードをハイライトする"]
<a href="http://tokyo.supersoftware.co.jp/?p=1662">
WordPress で SyntaxHighlighter Evolved を使ってソースコードをハイライトする
</a>
[/code]
<a href="http://tokyo.supersoftware.co.jp/?p=1662">
WordPress で SyntaxHighlighter Evolved を使ってソースコードをハイライトする
</a>

まとめ

いかがでしたでしょうか?
ソースコードが綺麗に表示されているだけで少しは読む気が上がるかと思います。
技術ブログとしてソースコードや説明以外の部分で分かりづらい事のないようにしたいですね。