WordPress の投稿内でソースコードに色付けを行う SyntaxHighlighter Evolved

シェアする

このブログはプログラムを記載する事が多いので、ソースコードに色付けを行う為のプラグインである SyntaxHighlighter Evolved を利用しています。

Sponsored Links

インストール

プラグイン -> 新規追加 から SyntaxHighlighter Evolved を検索すると出てくるので、インストール -> 今すぐ有効化と押していきましょう。

使い方

色付けを行いたい箇所を以下のような方法で囲う事で有効になります。

[ sourcecode language="language name" ] [ /sourcecode ]
[ code language="language name" ] [ /code ]
[ language name ] [ /language name ]

language name のところに目的のプログラミング言語を入れましょう。

オプション

上記のように囲う際、オプションを指定する事で表示方法を変更する事ができます。

ハイライト

以下のように highlight を指定する事で対応する行をハイライトできます。

[ language highlight="2,5" ]
[ /language]

rss = RSS::Parser.parse(feedUrl)
rss.items.each{|item|
    puts item.title
    puts item.link
}

行番号の開始を指定

行番号を表示する場合は、開始行を設定できます。

[ language firstline="10" ]
[ /language]

rss = RSS::Parser.parse(feedUrl)
rss.items.each{|item|
    puts item.title
    puts item.link
}

対応言語

標準では以下の言語に対応しています。

actionscript3 bash coldfusion c++ c# css delphi diff erlang groovy java javafx javascript perl php powershell python ruby scala sql vb xml clojure fsharp latex matlabkey objc r

また、言語を指定する場合は上記に記載の無いものでもある程度内部で変換して対応してくれます。例えば、html を指定した場合は xml として表示されます。

また、plain と指定すると色付けオフで表示できます。

言語を追加する

自分の使用したい言語が無い場合は追加しましょう。以下の記事のように、新たにプラグインを作成して対応するのがプラグインにアップデートがきた際に書きなおさなくて良いので楽です。

設定

設定画面からいろいろ変更できます。日本語対応しているので説明は不要でしょう。

自分は以下のような感じにしています。

  • SyntaxHighlighter のバージョン2を使用
  • テーマはデフォルト
  • 行番号を表示
  • 自動リンクを無効
  • 長文を折り返す

最後の長文を折り返す設定が SyntaxHighlighter のバージョン2でないと利用できないのでそっちを使用しています。

これでコードがだいぶ読みやすくなると思います。

Sponsored Link

シェアする

フォローする