【SyntaxHighliter Evolved】WordPress記事中でコードを綺麗に表示するおすすめプラグインの使い方

サムネイル プラグイン

 

WordPressでHTMLやCSSのコードを書くならできるだけ綺麗に表示したいですよね。

コードを綺麗に表示するためにはプラグインを使うのがオススメですが、種類が結構あります。

人気のものだと「Crayon Syntax Highliter」がありますが、個人的にあまりしっくりこないので別のプラグインを探したところ、「SyntaxHighliter Evolved」というプラグインがかなりしっくりきたので紹介します。

Crayon Syntax Highliterがなんか微妙だという人はこれがオススメです!

実際のコード表示画面がこちら↓

画像1

黒背景にタグやクラスが色分けで表示されます。僕は個人的に黒背景が好きなのでかなりいい感じですね。

 

スポンサーリンク

対応言語

以下の言語に対応しています。

  1. actionscript3
  2. bash
  3. clojure
  4. coldfusion
  5. cpp
  6. csharp
  7. css
  8. delphi
  9. erlang
  10. fsharp
  11. diff
  12. groovy
  13. html
  14. javascript
  15. java
  16. javafx
  17. matlab
  18. objc
  19. perl
  20. php
  21. text
  22. powershell
  23. python
  24. r
  25. ruby
  26. scala
  27. sql
  28. vb
  29. xml

これだけ対応していればまず大丈夫でしょう。

 

オススメの理由

  1. コードの上に使っている言語を表示できる
  2. 背景色が自分好みに変更できる
  3. 設定画面が日本語でわかりやすい
  4. 記事中にショートコードを書くことで簡単に表示できる
  5. 特定の行をハイライトできる

個人的には「コードの上に使っている言語を表示できる」機能が便利ですね。読んでいる人にもすごくわかりやすいです。

 

SyntaxHighliter Evolvedの設定

サクッと設定をしてしまいます。1分で終わります。

まずはダッシュボード→プラグイン→新規追加からSyntaxHighliter Evolvedをインストールして有効化しましょう。

画像2

プラグイン→SyntaxHighliter Evolvedの設定へ進んでください。

 

オススメの設定

「長い説明はいいから早く設定を教えてくれ」という人のためにオススメの設定をまとめました。

 

バージョン3.x
テーマお好みで(下に画像あり)
全てのブラシを読み込む
行番号を表示する
ツールバーを表示する
自動リンクを有効にする
コードボックスの表示を閉じておく
インデントを許容するスマートタブを使う
軽い表示モードを使う
長い行を折り返す
追加CSSのクラス名空欄
行番号の開始1
行番号の余白自動
タブのサイズデフォルトのままでオーケー
タイトル空欄

では詳しく見ていきましょう。

 

SyntaxHighliterのバージョン

バージョン3.xはコードが長い場合に横スクロールで表示されます。

バージョン2.xはコードが折り返され、ついでにマウスが乗るとツールバーが表示されます。

バージョン2.xはコードが長いと見づらいし、ツールバーも邪魔なのでで3.xを選択しておきましょう。

 

テーマ

背景色と文字の色が変更できます。自分の好きなものを選んでください。

一番下の行はハイライトした場合です。

 

デフォルト

画像3

Django

画像4

Eclipse

画像5

Emacs

画像6

Fade to Gray

画像7

Midnight

画像8

RDark

画像9

なし

画像10

 

全てのブラシを読み込む

ショートコードは使わずに<pre>タグで記述したいという人はチェックしましょう。

ショートコードを使った記述はこんな感じになります→[html]

要するにチェックをしなくて大丈夫です。

 

行番号を表示する

コードの左側に行番号を表示します。

表示したほうがわかりやすいと思うのでチェックしておきましょう。

 

ツールバーを表示する

ツールバーを表示するにチェックを入れると右側に何か出ます。

画像11

リンクになっていて、押すと公式サイトみたいな場所に飛びます。

当然いらないです。チェックは外しましょう。

 

自動リンクを有効にする

なんかよくわかりませんでした。

いらない機能だと思うのでチェックは外しておいて大丈夫です。

 

コードボックスの表示を閉じておく

チェックを入れると初期状態がこんな感じになります(これは画像なので押しても開きません)

画像12

これも自分の好みによりますが、個人的にはチェックを外しておいたほうが見やすい思います。

 

軽い表示モードを使う

チェックを入れると行番号やコードの上の言語が表示されなくなります。

動作は軽くなると思いますが、使わないほうがわかりやすいと思います。

チェックは外しておきましょう。

 

インデントタブを許容するスマートタブを使う

チェックをつけるとインデントも正しく認識してくれます。

ぜひチェックをつけておきましょう。

 

長い行を折り返す

バージョン3.xを選んだ人は飛ばしてください。

コードが長くなった時に折り返すか横スクロールで表示するかを選択できます。

オススメは横スクロールで表示なのでチェックはつけないでおきましょう。

 

追加CSSのクラス名

表示されている親要素のボックスの<div>タグにクラスを追加できます。

自分で指定したいスタイルがある時はここにクラスを追加し、テーマ編集でスタイルを指定しましょう。

よくわからない場合は何もしなくて大丈夫です。

 

行番号の開始

1にしておきましょう。

 

行番号の余白

コードの行番号が指定した数字と同じ桁で揃えられます。

自動にしておくのが一番いいと思います。

画像13

 

タブのサイズ

なんかよくわかりませんでした。

デフォルトの設定のままで大丈夫でしょう。

 

タイトル

空欄のままで大丈夫です。

 

SyntaxHighliter Evolvedの使い方

実際の記事中ではショートコードを使います。ビジュアル編集ではなくテキスト編集画面で書きます。

書き方はこんな感じ↓

画像14

[]内に書く言語によってコードがどの言語かを認識し、自動で色をつけてくれる仕組みです。

コードの上に使っている言語を表示するためには最初にtitle属性をつけます。

上のように書くとコードの上にHTMLと表示されます。

ちなみにjQueryのコードは[javascript title=”jQuery”]と書かないと認識してくれないので注意しましょう。

 

また、特定の行をハイライトしたい場合はhighlight属性をつけます。

複数指定したい場合はカンマで区切り、複数行を連続で指定したい場合はハイフンで繋ぎます。

例:highlight=”2,5-10″

この場合2行目と5〜10行目がハイライトされます。

 

他にもショートコードはたくさんあります(設定画面の下の方に書いてあります)ので適宜使いたいものを使ってください。と言いたいところですが、正直titleとhighlight以外はほとんど使う機会がないと思うので面倒なら無視していいです。

 

まとめ

SyntaxHighliter Evolvedの使い方を紹介しました。

使い方も簡単でコードも綺麗に表示されるので気に入っています。

Crayon Syntax Highliter がいまいちピンとこない人は使ってみてはどうでしょうか。