Highlighting Code Blockでシンタックスハイライト！

シンタックスハイライトはソースコードを見やすくするために、コードに色をつけること。

あるのとないのでは見やすさが全然違います。WordPressで投稿にコードを書きたいとき、シンタックスハイライトは必須。

そんなシンタックスハイライトが、簡単に設定できるプラグインがWordPressにはあります。

Highlighting Code Block の使い方

プラグイン追加画面から検索しインストール。インストールしたら有効化。

こちらからzip形式でダウンロードもできます。
Highlighting Code Block – WordPress プラグイン | WordPress.org 日本語

有効化すると投稿画面で使用できます。

投稿ブロックからHighlighting Code Blockを選び、クリック。

ブロックを選択すると、下記のような表示になるので「Your code…」のところにコードを記述します。

言語を選ぶ

「- Lang select -」から言語を選びます。

使える言語は以下の17種類。

HTML・CSS・SCSS・JavaScript・TypeScript・PHP・Ruby・Python・Swift・C・C#・C++・Objective-C・SQL・JSON・Bash・Git

入力したらそのファイル名、未入力の場合は言語名が右上に表示されます。

言語を選ばないとカラーが付きません。

data-line属性値を設定して行を強調

「data-line属性値」には強調したい行番号を指定します。

複数行を指定したい場合は「-（ハイフン）」、「,（カンマ）」で指定します。

連続した行数は「4-6」のように「-（ハイフン）」、飛ばして複数指定する場合は「4,6」のように「,（カンマ）」を使います。

ブロックごとに行数表示・言語名表示が設定

Highlighting Code Block のブロックを選択した状態で右側の「ブロック」を選択すると、「HCB設定」があります。
ここで個別に行数表示・言語名表示の設定ができます。

デフォルトでは「個別の設定はしない」となっているので、もしブロックごとに表示設定を変えたい場合はこちらから設定できます。

例えば行数も言語も「表示しない」に設定し、ファイル名を未入力状態、data-lineは設定している状態だとこのように表示されます。

data-lineで強調される行数は表示され、それ以外は行数は非表示なります。
ファイル名が入力されていればファイル名が表示されますが、未入力の場合は表示されません。

Highlighting Code Block の設定

Highlighting Code Block の設定は、設定 ＞ [HCB]設定 から行えます。
全体の設定はこちらから行います。

設定画面↓

言語・行数・コピーボタン

言語の表示、行数の表示設定、コピーボタンはデフォルトでONになっています。全て必要であればそのままで。

言語の表示はファイル名が未入力の場合、言語名が表示されますが、表示させたくない場合はチェックを外します。

左側に表示される行数が不要であれば、行数の表示設定のチェックを外します。

コピーボタンはワンクリックでコードをコピーしてくれるもの。ユーザーに優しいボタンです。ただ必要なければチェックを外します。

フォントスムージング

フォントスムージングはフォントを見えやすくするためのCSSです。
どうしても見えづらい場合は設定してもいいと思いますが、私はそんなに見えづらくなったことがないので、チェックしなくても大丈夫だと思います。

参照(外部サイト) : [font-smoothing] cssでフォントをきれいでなめらかに見せる方法

コードカラーリング

コードカラーリングは「Light」と「Dark」の2種類。

（フロント側）はサイトで見る表示、（エディター側）は管理画面での表示です。

見え方の違いはこんな感じです。

フォントサイズ・font-family

ここは好みやサイトのスタイルによって合わせていきましょう。

使用する言語セット

使わない言語を削除してスッキリさせたり、使用したい言語がない場合に追加することができます。

Highlighting Code Blockのシンタックス機能は「prism.js」を使っています。

prism.js 公式サイト

prism.js では Highlighting Code Block に設定されている言語よりはるかに多くの言語が使えます。
なのでこの中のものであれば新たに追加することができます。
prism.js でサポートしている言語一覧はこちら

その他のシンタックスハイライトを提供するプラグイン

Highlighting Code Block 以外にもシンタックスハイライトのプラグインはあるのでご紹介しておきます。

Enlighter – Customizable Syntax Highlighter

Code Prettify

Prismatic

ぜひ自分にあったプラグインを使ってみてください！