えじの自由帳

今の自分を書きためるブログ

Wordpress

ソースコードをキレイに表示するなら「WP Code Highlight.js」を使うべし!

1263610094-code-820275_1920-82y3-640x426-mm-100-1

以前「highlight.js」というライブラリを紹介しました。

highlight.jsはPHPやCSS、JavaScriptなどいろいろな言語のソースコードをキレイに色付け(ハイライト)してくれて、なおかつ軽量という素晴らしいライブラリです。

今回は、そのhighlight.jsを簡単に導入できるWordPressプラグインを紹介したいと思います。

スポンサーリンク

記事下

インストール

WordPress管理画面から「プラグイン」>「新規追加」を選択します。

検索窓に「WP Code Highlight.js」と入力して検索し、インストールしましょう。

install

インストールが完了したら有効化しておいてください。

設定方法

WordPress管理画面から「設定」>「WP Code Highlight.js」を選択します。

以下、黄色の四角で囲っているのは発展的な設定です。不要な方は読み飛ばしていただいて構いません。

配信元の設定

一番上の設定はhighlight.js本体をどこから配信するかの設定です。highlightjs.org recommendedとなっている、2番めか4番目を選択しておくと良いです。

setting1

ハイライトする言語の選択

その下はハイライト、色付けする言語の選択です。

最初の配信元で「local」以外を選んでいた場合は自動でPackageが「Common」になっているかと思います。これは、一般的な言語のみをハイライトする設定です。大抵の人はこれに含まれている言語で十分だと思います。

どうしても使いたい言語がある場合は以下のように設定してください。

  1. 配信元を「local」にする
  2. Packageを「All」にする
  3. 使いたい言語にチェックを入れる

setting2

テーマの設定

次はテーマの設定です。大きく分けて白背景と黒背景があります。白背景のおすすめは「GitHub gist」や「Atom One Light」、黒背景のおすすめは「darcula」や「Monokai-sublime」です。

しっくりこないと思ったら、https://highlightjs.org/static/demo/を見てみると良いでしょう。「Styles」をいろいろ切り替えてしっくりくるテーマを探しましょう。

setting3

Highlight.jsのオプション

次はコード整形の細かいオプションです。基本的にはデフォルトで大丈夫だと思います。

デフォルトではタブ記号が半角スペース4つで置換されているので、半角スペース2つにしたい人はTab replaceをスペース2つに変更してください。

setting3

スタイルの設定

基本的にはデフォルトで大丈夫です。見栄えを調節したい人はここにCSSを書くことができます。

setting4

互換性の設定

過去に「Prettify」や「Syntax Highlighter」、「Crayon」などを使っていたことがある人向けの設定です。

その時代に書いた記事のソースコードは、highlight.jsではうまくハイライトされないことがあります。そこで、その互換性を維持するための設定がここでできます。

使ったことがあるプラグインのところにチェックを付けてください。

setting5

ショートコードを有効化するか

WordPressでは、どこがソースコードなのか明確にするためにショートコードを使うことがあります。それを有効化する設定がここです。チェックをしておけば良いです。

setting5

保存を忘れずに

最後に「save」のボタンを押せば設定完了です。お疲れ様でした。

まとめ

  • highlight.jsを簡単に導入するプラグイン、「WP Code Highlight.js」を紹介しました。
  • 設定方法を解説しました

表示速度に大きな影響を与えず、ソースコードをキレイに表示してくれるプラグインでした。

難しい設定も少なく、よく出来たプラグインであると思います。みなさまもぜひお使いください。

 Wordpress