SOTA-JP.COM

書評、WordPress、アフィリエイト、米国株投資

Google-code-prettifyでシンタックスハイライト。エスケープ処理不要。

投稿日:2017年12月2日 更新日:

WordPressでプログラムのソースコードをキレイに表示させるのは、意外と手間がかかります。

HTMLエンティティ(特殊文字列)をエスケープ処理して、<pre><code>で囲んで、それでもってハイライト用のJavaScriptライブラリを読み込む。

サイトが重くなるのでJavaScriptライブラリを読み込むのは必要なときだけにしたいですし、コードを修正するたびにエスケープ処理し直すのは地味にメンドクサイです。

どうにか改善できないかなと以前から考えていたのですが、試行錯誤した結果、いい方法にたどり着きました。

大まかな手順は以下の3つです。

  1. ソースコードを記事の中に直接書くのではなく、カスタムフィールドにデータとして保存する。
  2. 記事中にショートコードを挿入して、そのショートコードからカスタムフィールドの値を取得する。
  3. ソースコードを表示する場合に限って、Google code-prettifyをCDNから読み込む。

それでは、順を追って説明します。

カスタムフィールドにソースコードを保存する。

まずは、カスタムフィールドにソースコードを保存します。

なぜ、カスタムフィールドに保存するのか?

これには2つのメリットがあります。

  1. カスタムフィールドには、ワードプレスの自動整形機能が適用されないため、ソースコードをそのままの状態で保存できる。
  2. ソースコードを取り出すのがカンタンである。
    記事の中でごちゃ混ぜになってしまうと、あとで取り出すときに正規表現を駆使して抽出するハメになります。

それでは、具体的なやり方です。

カスタムフィールドを表示させていない場合は、「投稿の編集」画面の上部にある「表示オプション」で「カスタムフィールド」を選択してください。

カスタムフィールドを表示させたら、「新規追加」ボタンを押して、「名前」欄に「code1」、「値」欄にソースコードをそれぞれ入力します。

ソースコードはエスケープ処理しなくてOKです。
そのまま貼り付けてください。

続いて「カスタムフィールドを追加」ボタンを押す。

ソースコードのカスタムフィールドへの保存作業はこれだけです。

ちなみに、複数のソースコードを登録したい場合は、code2、code3、code4という風に追加していきます。

ショートコードを登録する。

続いて、ショートコードの登録。

functions.phpに次のコードを貼り付けます。

add_shortcode('code',function ($attr){
  //記事の全てのカスタムフィールドを取得
  $custom_fields = get_post_custom();
 
  //カスタムフィールドを名前で絞る
  $my_custom_field = $custom_fields['code' . $attr[0]];
 
  //codeに格納されている文字列をエスケープして表示
  return "<pre class='prettyprint'>" . esc_html($my_custom_field[0]) . "</pre>";
});

Google code-prettifyをCDNから読み込む。

wp_footerにフックして、フッターにGoogle code-prettifyのライブラリを読み込みます。

ここでは、一手間加えて、記事中にショートコード[[code]]が存在する場合のみ、ライブラリを読み込むようにしています。

こうすることで、関係のない記事には負担をかけないようにしています。

add_action('wp_footer',function (){
  global $post;
  /*記事中にショートコード「code」が含まれている場合
  code-prettifyのライブラリをCDNから読み込む*/

  if(has_shortcode($post->post_content,'code')){
    echo '<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"></script>';
  }
});

CDNから読み込む場合、スキンは次の5種類から選べます。
default、desert、sunburst、sons-of-obsidian、doxyです。

ソースコードを表示する。

最後に、先ほど登録したショートコードを記事の中に書き、ソースコードを表示します。

[code 1]

書くのはこの1行だけ。

1番目のソースコードを表示する時は[[code 1]]、2番目なら[[code 2]]になります。

カンタンですね。

まとめ

仕組みは単純ですが、記事にソースコードを載せる作業がラクになりますよ。

コーディングの記事を多く書く方には特におすすめです。

いちど試してみてください。