HTMLなどのソースコードをキレイに表示するWordPressプラグイン「SyntaxHighlighter Evolved」

2012年11月22日 Web, Wordpress

最近、HTMLなどを紹介したいと考えていた初心者の私ですが、普通に文字を表示させるのではなく、綺麗に表示できるものないかと考えていたら、プラグインで「SyntaxHighlighter Evolved」というものがありました。対応しているコードも多く、レイアウトの色なども変更できるみたいなので導入することにしました。

そこで同じようなことを考えてる方のためにも紹介したいと思います。

対応しているコード

text
html
css
php
javascript
java
javafx
objc
perl
ruby
sql
actionscript3
bash
coldfusion
csharp
delphi
erlang
fsharp
diff
groovy
matlab (keywords only)
powershell
python
r
scala
vb
xml

導入方法

導入方法は下記のリンクからダウンロードするか、
WordPressのプラグイン管理画面から「SyntaxHighlighter Evolved」を検索しダウンロード。
もし下記のリンクからダウンロードした場合には、
FTPなどで「wordpressのディレクトリ」内の「wp-content/plugins」にアップロードします。
その後、管理画面のプラグインで有効化してください。

WordPressPlugins:「SyntaxHighlighter Evolved」

利用方法

使い方はとても簡単です。
コードを[表示したい言語][/表示したい言語]で挟むだけです。

例えば・・・・［html］

ocadwebは下記のサイトです。

http://www.ocadweb.com/

［/html］

と記載すると


&lt;p&gt;ocadwebは下記のサイトです。&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;http://www.ocadweb.com/&quot;&gt;http://www.ocadweb.com/&lt;/a&gt;&lt;/p&gt;

と表示されます。

またラインでわかりやすくしたい場合には、［html highlight=”◯,◯″］と「◯」に行数を入れれば、ラインが入ります。行数の間に「,」を入力すると複数ラインを入れることも可能です。

他にもMTやWPで「cgi」や「php」などの説明で途中からの行数を記載したい場合は、［html firstline=”◯″］と◯に行数を入力すればその指定した行数より表示されるようになっています。

他にもショートコードは・・・
・lang または language
ハイライトするコードの言語。パラメータ指定だけでなく［php］code［/php］のように言語をタグとして記述できます。

・autolinks
自動リンクの有効・無効

・classname
コードボックスに追加するCSSのclass

・collapse
コードボックスをデフォルトの状態で閉じるかどうか。
コードボックスを開くにはクリックが要求されます。
長いコードの出力の際に有効です。

・gutter
左側に行番号を配置するかどうか

・htmlscript
HTML/XML をハイライトするかどうか。
HTMLウェブページで PHP を使うようにHTML/XMLとプログラムが混在するような時に有効です。
上のプレビューではこの設定が有効になっています。これは特定の言語でしか動作しません。

・light
行番号やツールバーを無効にする軽い表示モードのオン・オフ

・padlinenumbers
行番号の余白。有効な値は、 false(余白なし), true (自動)、数値(余白)

・title （v3のみ）
コードの前に表示される表題テキスト。collapseのパラメータと合わせて使うと有効です。

・toolbar
ツールバーのオン・オフ(v2のボタン、v3のクエッションマーク)

・wraplines (v2のみ)
折り返しの有効・無効

プラグインの設定からテーマを選択でき、