WordPressでソースコードを表示できるプラグイン【WP Code Highlight.js】の設定と使い方

WordPress ソース 表示 WP Code Highlight.js 設定 使い方

こんにちは、きゃぷてんです。

こちらの記事でも書いているのですが、ブログやWordPressテンプレートのカスタマイズの記事を書いていると、様々な言語を記事内に埋め込むことがあると思います。

ただ、上記の記事のように外部サービスを使ってコードを埋め込む場合、面倒な登録作業や「ちょっとしたWeb知識」が必要になるので、できることならプラグインで簡単に済ませたいと考える人も多いはずです。

そんなときは「軽くて速い、そしてシンプル」という特徴を持った、WP Code Highlight.jsというプラグインを使って、簡単にソースコードをブログ記事に表示してみてはどうでしょうか。

WP Code Highlight.jsとはどんなプラグイン?

ひとことで言えば「ソースコードを表示するプラグイン」です。

特徴としては、軽い操作が簡単といった点が挙げられますので、「ブログ記事にソースコードを表示させたい、だけど面倒なのは嫌!」という場合であれば、重宝するプラグインだと思います。

ちなみに、WP Code Highlight.jsを使ってソースコードを表示すると、こんな感じで表示されるようになりますので参考にしてください。(色、フォント、デザイン等は変更可能)

<title>Title</title>
<style>body {width: 500px;}</style>
<script type="application/javascript">
function $init() {return true;}
</script>
<body>
<p checked class="title" id='title'>Title</p>
<!-- here goes the rest of the page -->
</body>

WP Code Highlight.jsを導入するメリット

WP Code Highlight.jsを導入するメリットは以下になります。

  • ソースコードを表示できるようになる
  • 軽い、早い、操作が簡単
  • デザインが豊富(背景・文字色の変更可能)

特別な知識が無くても、簡単に記事内にソースコードが表示できるようになるので、非常に便利なプラグインです。前述した「Gist」のような面倒な登録作業が無いのもメリットと言えるでしょう。

また、便利なプラグインであっても、動作が重ければ何の意味もありませんが、WP Code Highlight.jsは非常に軽くサクサク動くのでおすすめです。

どのくらい軽いのかについては、動作速度を検証しているマニアック 技術的なブログが結構あるので、そちらを参考にしてみてくださいね。

WP Code Highlight.jsをインストール

プラグインのインストール方法については下の記事で紹介していますので、参考にしてください。

WordPressにプラグインを追加する方法【超簡単に導入できるよ!】

2016.10.14

なお、検索ワードは「WP Code Highlight.js」と入力し、下図を目印にしてくださいね。

WordPress ソース 表示 WP Code Highlight.js 設定 使い方

インストールが完了したら「有効化」をクリックしてください。

WP Code Highlight.jsの設定

さてさて、プラグインを有効化にしたら設定を行いましょう。

まずは、WordPressの管理画面から、「設定」→「WP Code Highlight.js」の順に操作して、WP Code Highlight.jsの設定画面を表示してください。

WordPress ソース 表示 WP Code Highlight.js 設定 使い方

ここでは、以下の6つの設定を行うので「面倒だな・・・」と感じるかもしれませんが、それぞれの項目では大したことはしないのでサクサク進めていきましょう。

  • CDNの設定
  • Packageの設定
  • Color Schemeの設定
  • Highlight.js Optionの設定
  • You can add some additional CSS rules for better display:の設定
  • Enable [code]code content …[/code] supportの設定

CDNの設定

ここでは、ページの表示速度を高速化する設定を行います。

コンテンツ・デリバリー・ネットワーク(CDN)の略です。詳しい説明をすると2時間くらい必要になりますので何も考えずに「Public CDN:cdnjs(highlightjs.org recommend)」を選択してください。

WordPress ソース 表示 WP Code Highlight.js 設定 使い方
CDNとは

ウェブコンテンツをめっちゃ早く配信してくれる(最適化)

Packageの設定

ここでは、表示するソースコードの言語を選択します。

よほどマニアックな言語を使っていない限り「Common」を選択しておけば問題ありません。

WordPress ソース 表示 WP Code Highlight.js 設定 使い方

Color Schemeの設定

ここでは、エディタのデザインを選択します。

この記事の上の方にWP Code Highlight.jsを使った例としてソースコードを表示していますが、あのデザインはここで変更できます。

WordPress ソース 表示 WP Code Highlight.js 設定 使い方

デザインのサンプルについては、highlight.js demoの「Style」に候補がありますので、クリックして確認してみてください。

僕は、なんとなくカッコいいという理由で「arta」というデザインを採用しました。

Highlight.js Optionの設定

デフォルトのままで問題ありません。

WordPress ソース 表示 WP Code Highlight.js 設定 使い方

You can add some additional CSS rules for better display:の設定

デフォルトのままで問題ありません。

WordPress ソース 表示 WP Code Highlight.js 設定 使い方

Enable [code]code content …[/code] supportの設定

ここでは、ショートコード使うか使わないかを設定します。

チェックを入れると、ソースコードを[code][/code]で囲むと、WP Code Highlight.jsを使えるようになるのですが、大したメリットではないのでお好みでチェックを入れてください。

WordPress ソース 表示 WP Code Highlight.js 設定 使い方

 

最後に「Save」をクリックすると設定が反映されます。お疲れ様でした!

WordPress ソース 表示 WP Code Highlight.js 設定 使い方

以上で設定が完了しましたので、実際にWP Code Highlight.jsを使ってみましょう。

WP Code Highlight.jsを使ってみよう

それでは、さっそくWP Code Highlight.jsを使ってソースコードを表示してみましょう。

WP Code Highlight.jsを使ってソースコードを表示する方法は「htmlタグを使う方法」と「ショートコードを使う方法」の2種類ありますので、ぞれぞれについて説明していきますね。

  • <pre><code>~~~</code></pre>
  • [code]~~~[/code]

基本的には、~~~の部分を表示させたいソースコードに変更するればOKです。

使い方1:<pre><code>~~~</code></pre>

~~~の部分を表示させたいコードに変更します。

<pre><code>~~~</code></pre>

<title>Title</title>
<style>body {width: 500px;}</style>
<script type="application/javascript">
  function $init() {return true;}
</script>
<body>
  <p checked class="title" id='title'>Title</p>
  <!-- here goes the rest of the page -->
</body>
補足説明

HTMLなどで使われる特殊文字(&、"、<、>)は、文字実体参照(&amp;、&quot;、&lt;、&gt;)を実施してから利用してください。

ちなみに、以下のように表示させるソースコードの言語名を記述する方法もありますが、わざわざ言語名を記述しなくても自動判別してくれるので、この方法を使う必要はありません。

<pre><code class=”言語名”>~~~</code></pre> ← 使う必要なし

使い方2:[code]~~~[/code]

~~~の部分を表示させたいコードに変更します。

[code]~~~[/code]
<title>Title</title>
<style>body {width: 500px;}</style>
<script type="application/javascript">
function $init() {return true;}
</script>
<body>
<p checked class="title" id='title'>Title</p>
<!-- here goes the rest of the page -->
</body>
補足説明

HTMLなどで使われる特殊文字(&、"、<、>)は、文字実体参照(&amp;、&quot;、&lt;、&gt;)を実施してから利用してください。

こちらも、言語名を記述する方法がありますが、わざわざ言語名を記述しなくても自動判別してくれるので、この方法を使う必要はありません。

[code lang="言語名"]~~~[/code] ← 使う必要なし

「使い方1」と「使い方2」の違い

WP Code Highlight.jsの「使い方1」と「使い方2」では、文字間隔に違いがありました。

なので、ぴっちりとコードを表示させたい場合は「使い方1(HTMLタグを使う方法)」を選択すればいいですし、ゆったりとコードを表示させたい場合は「使い方2(ショートコードを使う方法)」を選択すればいいですね。

僕は、ぴっちり表示させる方が好きなので「使い方1(HTMLタグを使う方法)」派です(笑)

プラグインを増やしたくない場合は「Gist」がオススメ

無駄にプラグインを増やすのは嫌!

そんな時は「Gist」という外部サービスを利用すると、プラグインなしで綺麗にソースコードを表示することができますのでおすすめです。

【Gistの設定と使い方】プラグイン無しでブログにソースコードを埋め込む方法

2018.02.25
WordPress ソース 表示 WP Code Highlight.js 設定 使い方

あなたのシェアが僕の笑顔の源です

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

きゃぷてん

アフィリエイトは副業でやってます。「まったり自由に生きる」がモットーなのでブログ名をliberty-life-blogにしました。 <趣味> 汚い居酒屋探し、フットサル、お散歩、筋トレ <特技> 足首を無限にポキポキ鳴らせます。