平社員日記

WordPress用ソースコード表示プラグイン★2020年2月版

ソースコードの表示が間抜け

一応、元プログラマーなので、ソースコードの解説記事も作っていきたいと考えているのですが、WordPressの記事内にソースコードを表示しようとすると、あまりに間の抜けた表示でショックを受けました。
プラグインで解決できましたが、少しプラグイン選びでハマりましたので、備忘にまとめます。

Enlighterの使い方だけ知りたい方は、Enlighterの使い方に飛んでください。

この記事はこんな方におすすめ

  1. WordPressの記事内にソースコードを表示すると、間の抜けた表示になってしまう。
  2. コード内の説明を記載しようとしても、行数が表示されないので、説明しずらい。
  3. 他の人のブログにはきれいなコードが張られている?どうやっているのかな?
  4. 「Crayon Syntax Highlighter」という、プラグインを使ってみたがうまくいかない。

プラグインの検索

このような場合は必ず先人の知恵が活かされています。要するにプラグインをググります。
一番ヒット数が多く、実績もありそうなのが「Crayon Syntax Highlighter」でした。
プラグインを有効にしても、元の表示と大して変更なし。よく見ると、このプラグインの最終更新は4年前。
参考にしたサイトでは、正常に動作しているように見えましたが、現在の筆者の環境(WordPress 5.3.2)では動きませんでした。

次に見つけたのが「Enlighter - Customizable Syntax Highlighter」で、最終更新は3カ月前でした。
人気もそこそこありそうなので、Enlighterをインストール。

Enlighterの使い方

EnlighterをインストールするとCode Insertのボタンがビジュアルエディタに追加されます。

ソースコードを張り付け、OKボタンをクリックします。

ソースがヴィジュアルエディタに張り付けられます。

デフォルト設定でも十分に見やすいコードになりますが、好みのデザインに変更が可能です。

ポップアップ画面から、テーマを選択します。

無事、下記のようなソース表示が出来るようになりました。

完成イメージ

デフォルトテーマの例

function KeyDownFunc(e){
  //コントロールキー+Enterキーが押された場合、
  if (e.ctrlKey && e.key == 'Enter'){
    //プレビューボタンのIDを取得します。
    var pvID = document.getElementById('post-preview');
    if (pvID){
      //プレビューボタンをクリックする命令
      pvID.click();
    }
  }
}
// キーボードを押したときに実行されるイベント
document.addEventListener("keydown" , KeyDownFunc);

mochaテーマの例

function KeyDownFunc(e){
  //コントロールキー+Enterキーが押された場合、
  if (e.ctrlKey && e.key == 'Enter'){
    //プレビューボタンのIDを取得します。
    var pvID = document.getElementById('post-preview');
    if (pvID){
      //プレビューボタンをクリックする命令
      pvID.click();
    }
  }
}
// キーボードを押したときに実行されるイベント
document.addEventListener("keydown" , KeyDownFunc);

atomicテーマの例

function KeyDownFunc(e){
  //コントロールキー+Enterキーが押された場合、
  if (e.ctrlKey && e.key == 'Enter'){
    //プレビューボタンのIDを取得します。
    var pvID = document.getElementById('post-preview');
    if (pvID){
      //プレビューボタンをクリックする命令
      pvID.click();
    }
  }
}
// キーボードを押したときに実行されるイベント
document.addEventListener("keydown" , KeyDownFunc);

 

教訓

プラグインのように次々と開発されるものは常に最新情報をキャッチしていかないと今回のような遠回りをしてしまう。
WordPress初心者だと何をするにもつまずき、ググる必要が出てくるので、時間がかかる。
本を買って体系的に勉強するのも良いかも。本も新しいものを選ぶ必要がある。

-平社員日記

Copyright© ナカログ , 2020 All Rights Reserved.