軽くてシンプル!WordPressでソースコードを表示するプラグイン「WP Code Highlight.js」を使ってみた

SEROの嫁です。主に裏方担当。
夫のアシスタントをしたり、ブログに投稿したりしています。
2級ウェブデザイン技能士。

この記事は2017年1月6日に書かれたものです。
現在は内容が古い可能性もありますのでご注意ください。

サイトにソースコードを表示させたいけど…

WordPressやWebについての記事を書いていると、「ソースコード」を表示したいことがよくあります。
文中にそのままペタっと貼り付けてもいいんですが、やはり見栄え良く見やすく表示させたいですよね。

そのためのWordpressプラグインは数多くありますが、有名どころは

辺りでしょうか。

色々なサイトで見かけるし、このどちらかにしようか思い色々調べてみたら、皆さん口を揃えて「重い」と言っている…。
確かに、これを使っているとおぼしきサイトを開くとソースコードの箇所だけワンテンポ遅れて表示される、といったことがあるような気がします。

機能はシンプルでいいから、コードが色分けされて背景色が着く程度でいいんだけどなー。
と探していたら、ちょうど良さそうなプラグインがありました!
→ WP Code Highlight.js – WordPress Plugins

元々「highlight.js」というJavascriptライブラリがあり、それをプラグインで扱えるようにしたもののようです。

導入方法

  1. メニュー>プラグイン>新規追加で、「WP Code Highlight.js」と入れて検索
    170106wch01
  2. 「有効化」をクリック
    170106wch02

設定

  1. メニュー>設定 で「WP Code Highlight.js」をクリック
    170106wch07
  2. CDNを設定します。ここは素直に「Public CDN:cdnjs(highlightjs.org recommend)」(highlightjs.org おすすめ)を選択。
    170106wch03
  3. 対応する言語を選択します。ここも「common(一般)」でOK。
    (というか、2でlocal以外を選ぶと、commonに固定されました)
    170106wch04
  4. 色の設定です。今回は「tomorrow-night」にしてみました。パターンはすごく豊富です。こちらのデモページ(https://highlightjs.org/static/demo/)で全ての配色を見ることができます。
    170106wch05
  5. ここにチェックすると、ショートコード[code]~[code]が使えるようになります。
    すべての設定ができたら、「Save」をクリックして保存します。
    170106wch06

使い方

では早速使ってみましょう!
実は、前回の投稿で早速使っているんですよ。
→ すぐ出来る!プラグイン「WordPress Popular Posts」のCSSカスタマイズ方法

使い方はとても簡単で、表示させたいコードを<pre><code>~</code></pre>で囲むだけです。

<pre><code>
h4 {
color: #333333 !important;
font-size: 24px !important;
padding: 0.5em 0.5em 5px 0;
margin: 0;
border-bottom: 1px solid #333333;
}
</code></pre>

そうすると、下記のように表示されます!

h4 {
	color: #333333 !important;
	font-size: 24px !important;
	padding: 0.5em 0.5em 5px 0;
	margin: 0;
	border-bottom: 1px solid #333333;
}

実は、設定で出てきた[code]~[code]も使ってみたんですが、他のプラグインと競合しているようで、うまく表示されませんでした。

使われる環境に合わせて使い分けが必要ですね。

というわけで、ソースコードを表示するプラグイン「WP Code Highlight.js」のご紹介でした。
行番号やボーダー表示は無いですが、シンプルが一番!という方にはオススメです。

 

3 comments on “軽くてシンプル!WordPressでソースコードを表示するプラグイン「WP Code Highlight.js」を使ってみた

Comments are closed.