Infochowder

色々な情報がギュッと詰まったサイト

WordPressでソースコードを表示するプラグイン

投稿日: 2017年10月23日

このサイトでもソースコードをいろいろと紹介しています。そのまま記述しても何の問題もないのですが、見栄えと、どこからどこまでがソースコードなのかをはっきりさせておきたいですよね。

シンプルで使い方がわかりやすいものが使いたい

プラグインを導入するなら、やっぱり使い方がわかりやすいものがいいですね。プラグインの導入はWordPressならプラグインの新規追加からダウンロードして、有効化するだけで済むので。

ググっていろいろ調べていると、やっぱりいろいろあって迷います。その中では「WP Code Highlight.js」がよさそうです。もともと「heighlight.js」というjavascript ライブラリをWordPressのプラグインにしたものだとのこと。もとのheilight.jsは、jQueryなしで動作するので、通常のウェブサイトでも導入しやすそうですね。

設定は2ヶ所で簡単に動作

導入はいつも通りプラグインの新規追加からダウンロード、有効化と進んでいきます。その後、「設定」→「WP Code Highlight.js」と進みます。

設定するのは2ヶ所です

  1. CDN
  2. Color Scheme

このプラグインはCDNにホストされている(プログラム本体が別のサーバーにある)ので、どの場所からプログラム本体を参照するかを選びます。デフォルトの「Public CDN:cdnjs(highlightjs.org recommend)」になっていることを確認すればオッケーです。

Color Schemeは、その項目の右側「https://highlightjs.org/static/demo/」がリンクされているのでそこから選びます。リンク先で左サイドバーをクリックするといろいろと変化しますので、好みに合わせて選んでください。このサイトは「github」に設定しています。

使い方はタグで囲むだけ

使い方はプラグインの設定画面の下にある表「Plugin Usage」に書いてある通り。ソースコードとして表示させたい部分を<pre><code>と<pre></code>で囲むだけです。クラスに言語を指定すればその言語に合わせた表示にしてくれるようですが、デフォルトで言語は自動判定なのでそのまま囲むだけでいい感じにしてくれます。

欠点が一つだけ

タグで囲むだけとはいうものの、デフォルトのWordPresssのビジュアルモードでは使用できません。<pre>は「段落」のリストから「整形済みテキスト」を選ぶだけなのですが、<code>はそうはいきません。ソースコードを表示したいときにわざわざテキストモードに変更する必要があります。

別のプラグイン「TinyMCE Advanced」を使用すれば<code>も挿入できるようになるのですが、それほどたくさんのソースコードを挿入することもありませんし、ソースコードそのものはコピペする場合がほとんどなので、そのためだけに導入はしたくないので必要に応じて切り替えるようにしています。

最初からテキストモードで編集するという手段もあります。

特に難しい設定をしなくても動作して、タグで囲むだけの簡単に使えるのですから、都度テキストモードに切り替えてもやっぱり手放せないプラグインになりそうです。