[WordPress] ソースコードを綺麗に表示！SyntaxHighlighter Evolvedプラグイン導入

2015/03/31 2015/10/11

Pocket

こんにちは、okutani(@okutani_t)です。WordPressにソースコードを貼り付けるとき、みなさんはどのようにしているでしょうか。

WordPressプラグイン「SyntaxHighlighter Evolved」を使うと、ソースコードの表示を綺麗に整えてくれるのでオススメです。

また、言語毎にシンタックスハイライトもしてくれるので、プログラミング系の記事を多く書く人はぜひ導入しておきたいプラグインですね。

では、さっそくSyntaxHighlighter Evolvedをインストールしていきましょう。

1 SyntaxHighlighter Evolvedの導入
2 SyntaxHighlighter Evolvedの設定
3 利用方法
- 3.1 ショートコードパラメータを使ってみる

SyntaxHighlighter Evolvedの導入

ダッシュボードから「プラグイン」→「新規追加」を選択します。

右上の検索バーに「SyntaxHighlighter Evolved」と入力して検索、「いますぐインストール」をクリックします。

インストールが完了したら「プラグインを有効化」をクリックしましょう。

これでSyntaxHighlighter Evolvedの導入が完了しました。

SyntaxHighlighter Evolvedの設定

では設定を行っていきましょう。
ダッシュボードから「設定」→「SyntaxHighlighter」を選択します。

設定画面が開きました。設定画面は日本語で記述してあるのでわかりやすいですね。

バージョンとテーマの選択

まずはSyntaxHighlighterのバージョンを選択します。

今回は「コピー時に行番号がコピーされない」「ダブルクリックでコード全選択が行える」といった特徴がある「バージョン3.x」を選択しました。

「バージョン2.x」だと見た目が少し違うのと、ツールバー等が表示できるようになります。

一緒にテーマも選択しておきましょう。

ちなみにテーマの見た目はDefaultだと

Emacsは

Eclipseなんかはこんな感じでした。

お好みでテーマを選択しましょう。

ツールバー表示について

大体の項目は読めばわかるのですが、いくつかわかりにくい項目があるのでそちらを説明します。
「ツールバーを表示する」の項目は下記の通りです。

バージョン3.x

コードの右上にSyntaxHighlighterのクレジットリンク表示

バージョン2.x

マウスホバー時にコード右上にツールバー表示

バージョン2を使うのであればチェックを入れて置いたほうが良いと思います。

自動リンク・軽い表示モード

次の項目の「自動リンクを有効にする」は、コード内にあるURLリンクが選択できるようになります。基本的にチェックしない方がいいです。

「軽い表示モードを使う」は、行番号やツールバーが表示されなくなります。このチェックもいりません。

設定が終わったら次の項目をみていきましょう。

CSS・タイトル

ここでもわかりにくい項目を説明していきます。
「追加のCSSのClass名」は、コードを囲うdivに任意のclass名をつけることができます。これで任意のclassを付けてcssを使ったスタイルを記述することができますね。

「タイトル」はソースコードの上にタイトルをつけることができます。試しに「java code」と入力して保存すると、下記のようにコード上部にタイトルが付きました。

また、タイトルは「ショートコードパラメータ」という個別のオプションをつけることでコード毎にも付けることができるので、お好みで設定しましょう。

これで基本的な設定は終わりです。「変更を保存」を忘れずにクリックしましょう。

利用方法

利用方法は簡単です。

[言語の名前]
ソースコード
[/言語の名前]

のように記述することで利用できます。

では記事の投稿画面を開いて、「テキスト」タブをクリックして記述していきましょう。

ちなみにビジュアルモードだと利用できないので注意が必要です。

今回はjavaのコードを表示してみました。他にもhtml,css,php等々の言語が対応しています。

参考Posting Source Code — Support — WordPress.com

対応言語

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

かなりたくさんの言語に対応していますね。

ショートコードパラメータを使ってみる

ショートコードパラメータを利用すると、任意の行の行番号を変更したり、行をハイライトすることができます。

ショートコードの一覧は設定画面の一番下にあるので参考にしてみてください。

先頭の行番号を変更「firstline」

では先頭の行番号を変える「firstline」を使ってみます。

[言語の名前 firstline="100"]
ソースコード
[/言語の名前]

先頭の行番号が100から始まるようになりました。参考するコードの場所を指定するとき利用できそうですね。

行をハイライト「highlight」

行をハイライトする「highlight」は次のように使います。

[言語の名前 highlight="1-3,5"]
ソースコード
[/言語の名前]

ハイフン( – )で範囲指定、カンマ( , )でハイライト箇所を増やせます。

タイトルを付ける「title」

コード上にタイトルを付ける「title」を使ってみます。ちなみにバージョン2.xではタイトルはつけることができません。

[言語の名前 title="javaソースコード"]
ソースコード
[/言語の名前]

一般設定で入力したタイトルは上書きされます。

ショートコードパラメータは複数つけることができるので、いろいろと好きなように設置してみてください。

基本的な使い方は以上です。参考になれば幸いです。

Pocket

okutani (okutani_t) のヒトコト

okutani_t

結構いじれる箇所があってうれしいですね。後はCSSでレイアウトを変えて見やすくすると良いと思います(`･ω･´)

Web開発のお仕事を募集しています

フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。

「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。

ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。

LINKお問い合わせ

LINKokutani's Portfolio

- WordPressプラグイン