WordPressでHTMLやCSSのコードを書くならできるだけ綺麗に表示したいですよね。
コードを綺麗に表示するためにはプラグインを使うのがオススメですが、種類が結構あります。
人気のものだと「Crayon Syntax Highliter」がありますが、個人的にあまりしっくりこないので別のプラグインを探したところ、「SyntaxHighliter Evolved」というプラグインがかなりしっくりきたので紹介します。
Crayon Syntax Highliterがなんか微妙だという人はこれがオススメです！
実際のコード表示画面がこちら↓
黒背景にタグやクラスが色分けで表示されます。僕は個人的に黒背景が好きなのでかなりいい感じですね。
対応言語
以下の言語に対応しています。
- actionscript3
- bash
- clojure
- coldfusion
- cpp
- csharp
- css
- delphi
- erlang
- fsharp
- diff
- groovy
- html
- javascript
- java
- javafx
- matlab
- objc
- perl
- php
- text
- powershell
- python
- r
- ruby
- scala
- sql
- vb
- xml
これだけ対応していればまず大丈夫でしょう。
オススメの理由
- コードの上に使っている言語を表示できる
- 背景色が自分好みに変更できる
- 設定画面が日本語でわかりやすい
- 記事中にショートコードを書くことで簡単に表示できる
- 特定の行をハイライトできる
個人的には「コードの上に使っている言語を表示できる」機能が便利ですね。読んでいる人にもすごくわかりやすいです。
SyntaxHighliter Evolvedの設定
サクッと設定をしてしまいます。1分で終わります。
まずはダッシュボード→プラグイン→新規追加からSyntaxHighliter Evolvedをインストールして有効化しましょう。
プラグイン→SyntaxHighliter Evolvedの設定へ進んでください。
オススメの設定
「長い説明はいいから早く設定を教えてくれ」という人のためにオススメの設定をまとめました。
| バージョン | 3.x |
|---|---|
| テーマ | お好みで（下に画像あり） |
| 全てのブラシを読み込む | |
| 行番号を表示する | |
| ツールバーを表示する | |
| 自動リンクを有効にする | |
| コードボックスの表示を閉じておく | |
| インデントを許容するスマートタブを使う | |
| 軽い表示モードを使う | |
| 長い行を折り返す | |
| 追加CSSのクラス名 | 空欄 |
| 行番号の開始 | 1 |
| 行番号の余白 | 自動 |
| タブのサイズ | デフォルトのままでオーケー |
| タイトル | 空欄 |
では詳しく見ていきましょう。
SyntaxHighliterのバージョン
バージョン3.xはコードが長い場合に横スクロールで表示されます。
バージョン2.xはコードが折り返され、ついでにマウスが乗るとツールバーが表示されます。
バージョン2.xはコードが長いと見づらいし、ツールバーも邪魔なのでで3.xを選択しておきましょう。
テーマ
背景色と文字の色が変更できます。自分の好きなものを選んでください。
一番下の行はハイライトした場合です。
デフォルト
Django
Eclipse
Emacs
Fade to Gray
Midnight
RDark
なし
全てのブラシを読み込む
ショートコードは使わずに<pre>タグで記述したいという人はチェックしましょう。
ショートコードを使った記述はこんな感じになります→[html]
要するにチェックをしなくて大丈夫です。
行番号を表示する
コードの左側に行番号を表示します。
表示したほうがわかりやすいと思うのでチェックしておきましょう。
ツールバーを表示する
ツールバーを表示するにチェックを入れると右側に何か出ます。
リンクになっていて、押すと公式サイトみたいな場所に飛びます。
当然いらないです。チェックは外しましょう。
自動リンクを有効にする
なんかよくわかりませんでした。
いらない機能だと思うのでチェックは外しておいて大丈夫です。
コードボックスの表示を閉じておく
チェックを入れると初期状態がこんな感じになります（これは画像なので押しても開きません）
これも自分の好みによりますが、個人的にはチェックを外しておいたほうが見やすい思います。
軽い表示モードを使う
チェックを入れると行番号やコードの上の言語が表示されなくなります。
動作は軽くなると思いますが、使わないほうがわかりやすいと思います。
チェックは外しておきましょう。
インデントタブを許容するスマートタブを使う
チェックをつけるとインデントも正しく認識してくれます。
ぜひチェックをつけておきましょう。
長い行を折り返す
バージョン3.xを選んだ人は飛ばしてください。
コードが長くなった時に折り返すか横スクロールで表示するかを選択できます。
オススメは横スクロールで表示なのでチェックはつけないでおきましょう。
追加CSSのクラス名
表示されている親要素のボックスの<div>タグにクラスを追加できます。
自分で指定したいスタイルがある時はここにクラスを追加し、テーマ編集でスタイルを指定しましょう。
よくわからない場合は何もしなくて大丈夫です。
行番号の開始
1にしておきましょう。
行番号の余白
コードの行番号が指定した数字と同じ桁で揃えられます。
自動にしておくのが一番いいと思います。
タブのサイズ
なんかよくわかりませんでした。
デフォルトの設定のままで大丈夫でしょう。
タイトル
空欄のままで大丈夫です。
SyntaxHighliter Evolvedの使い方
実際の記事中ではショートコードを使います。ビジュアル編集ではなくテキスト編集画面で書きます。
書き方はこんな感じ↓
[]内に書く言語によってコードがどの言語かを認識し、自動で色をつけてくれる仕組みです。
コードの上に使っている言語を表示するためには最初にtitle属性をつけます。
上のように書くとコードの上にHTMLと表示されます。
ちなみにjQueryのコードは[javascript title=”jQuery”]と書かないと認識してくれないので注意しましょう。
また、特定の行をハイライトしたい場合はhighlight属性をつけます。
複数指定したい場合はカンマで区切り、複数行を連続で指定したい場合はハイフンで繋ぎます。
例：highlight=”2,5-10″
この場合2行目と5〜10行目がハイライトされます。
他にもショートコードはたくさんあります（設定画面の下の方に書いてあります）ので適宜使いたいものを使ってください。と言いたいところですが、正直titleとhighlight以外はほとんど使う機会がないと思うので面倒なら無視していいです。
まとめ
SyntaxHighliter Evolvedの使い方を紹介しました。
使い方も簡単でコードも綺麗に表示されるので気に入っています。
Crayon Syntax Highliter がいまいちピンとこない人は使ってみてはどうでしょうか。
