新宿区のトータルクリエイティブオフィス えんぎ株式会社 / ENGI Inc.
©2020 ENGI Inc.
WordPressの記事内にソースコードを埋め込むなら『Highlighting Code Block』というプラグインが簡単でオススメ！
2020年06月29日 06:00
こんにちは、ENGI MAG編集部です！
今回は、WordPressの記事にソースコードの記述をしたい場合のオススメプラグイン『Highlighting Code Block』をご紹介いたします！
ソースコードを埋め込みたい場合、恐らくただソースが表示されていればいいわけではなく、いわゆる“シンタックスハイライト”をしたい方が多いかと思います。
シンタックスハイライトというのは、ソースを読みやすくするために良い感じに色を付けて表示するもので、以下のようなものです。
<p class="syntax_highlighting">これがシンタックスハイライトです。</p>
いかがでしょうか？ 色分けされていて見やすいですよね。
<p>『Highlighting Code Block』を使えば、<br>
行数が多くても行番号が左側に表示されるので<br>
とっても読みやすいです。</p>
さらに、上記のようにコードの量が多くても左側に行番号が表示されるのでとっても読みやすく便利。
それを叶えてくれるのが『Highlighting Code Block』です。
ちなみに他にも『Crayon Syntax Highlighter』というプラグインが有名でしたが、
・最終更新4年前
・使用中のWordPressバージョンで未検証
となっているので使用するのは非常に危険かなと。なんかエラーとか出てももう多分直らないからね。
なので更新もされていて、設定なしでもすぐ使えちゃうくらい簡単な『Highlighting Code Block』をオススメします。
『Highlighting Code Block』のインストール方法
管理画面サイドバーの[プラグイン]→[新規追加]をクリックします。
※上記画像では既にインストールされているため[有効]ボタンになっています。
検索窓で『Highlighting Code Block』と調べて表示されたら、[今すぐインストール]ボタンをクリックしてインストールは完了です。
使い方も超簡単
『Highlighting Code Block』は使い方も超簡単です。
基本的に設定しなくてもツールバーに機能が追加されて即使えます。
ビジュアルエディタのツールバーにこんなやつが表示されていると思います。
埋め込みたいコードをドラッグで選択して、
埋め込むのがhtmlならhtmlを、phpならphpを…という感じで選択するだけです。
エディタ上では色分けされていないシンプルなコードが表示されていると思いますが、自動で色がつくのでご安心ください！
以上となります。