ブログ記事にプログラムのコードを載せたい!

WordPressで運営しているブログ記事にHTMLやCSSのコードを載せたい場合、『Crayon Syntax Highlighter』や『SyntaxHighlighter Evolved』といったシンタックスハイライトをしてくれるプラグインを導入している人が多いのではないでしょうか?

シンタックスハイライトの様子

しかし、これらのプラグインはJavaScriptを読み込んだり、デザインを反映させたりするために、どうしても挙動が重くなりがちです。

また、「Emanon Pro」というWordPressテーマを使っている人は、テーマのCSSの関係で、うまくハイライトしてくれなかったり、スマホで閲覧する際に表示が崩れてしまったりします。

そこで今回は、「Emanon Pro」を利用している人が、記事にHTMLやCSSのコードを載せたい場合におすすめのWordPressプラグイン『WP Code Highlight.js』についてご紹介させていただきます。

実装環境

今回の記事を書いた時点での当ブログの環境は以下の通り。

  • サーバー:エックスサーバー
  • WordPress:4.7.3
  • Emanon Pro:1.2.9(子テーマを利用)

 

Emanon Pro Ver1.3.0でシンタックスハイライト系プラグインの CSS対応

(2017年4月14日追記)

2017年4月12日に実施されたEmanon Proのバージョンにより、表示が崩れていた「Crayon Syntax Highlighter」や「SyntaxHighlighter Evolved」といったWordPressプラグインが使えるようになりました!

 

この記事の対象となる方

まず大前提として、この記事は以下のような方に向けて書いています。

  • WordPressテーマ「Emanon Pro」を利用している
  • HTML/CSSはなんとなく分かるが、WordPressタグやPHPはあまり知らない
  • できればプラグインを導入してサクッと解決したい

WordPressで運営しているブログで、自分の欲しい機能を実装しようと思うと、「テーマファイルを修正」か「プラグインの導入」のどちらかですよね?

ただ、「テーマファイルを修正」する場合、仮に子テーマを導入していたとしても、親テーマ自体がバージョンアップした時に、不具合が出たり表示が崩れたりする可能性があります。

継続的にメンテナンスをするより、ある程度は「プラグインの導入」に頼ったほうが、記事作成に集中できるのではないでしょうか?

 

Sponsored link

『WP Code Highlight.js』とは

WordPressにおいてシンタックスハイライトさせたい場合、プラグインでの導入の他に、「Highlight.js」というJavaScriptライブラリを導入する方法があります。

参考highlight.js

ただ、この方法は、適応させるライブラリを自分で選んだり、テーマファイルを修正したりと地味に時間がかかります。

この「Highlight.js」を一瞬で導入するとともに、WordPressの管理画面上でデザイン等を自由に選択できるのが、『WP Code Highlight.js』というWordPressプラグインなんです。

 

Sponsored link

『WP Code Highlight.js』を選んだ理由

「Emanon Pro」は更新頻度が高く、テーマファイルを変更するカスタマイズはできるだけ少なくしたかったので、3つのWordPressプラグインを比較して『WP Code Highlight.js』を選びました。

 

×:Crayon Syntax Highlighter

もともとは『Crayon Syntax Highlighter』を利用していたのですが、親テーマに設定されているtableタグのCSSのせいで、スマホで閲覧すると表示が崩れると分かりました。

スマホの表示が崩れている

 

×:SyntaxHighlighter Evolved

『Crayon Syntax Highlighter』の次に有名な『SyntaxHighlighter Evolved』というプラグインも試しましたが、今度はpreタグ(整形済みテキスト)に設定されているCSSのせいで、そもそもハイライトされない……。

ハイライトされていない様子

 

○:WP Code Highlight.js

「行番号が無い」や「折り返して表示される」等、ちょっとした不満はあるものの、もともと利用していた『Crayon Syntax Highlighter』との互換性も高く、動作も軽快だったので、このプラグインに決めました

 

『WP Code Highlight.js』の導入と設定

『WP Code Highlight.js』の導入方法と、設定項目について簡単にまとめておきます。

 

インストール方法

WordPressの管理画面で「プラグイン」→「新規追加」を選択し、検索窓に『WP Code Highlight.js』と入力して「今すぐインストール」

インストールの様子

 

インストールが完了したら「有効化」

有効化の様子

 

プラグインの一覧画面になったら、『WP Code Highlight.js』の「設定」を選択

設定画面に移動

 

設定項目

CDN

「Highlight.js」を何で読み込むかを選択します。「highlightjs.org recommend」となっているものを選べば問題ありません。

Package

JavaScriptライブラリを選択できます。「Common」のままでOK。

Support List

ハイライトさせる言語を選びます。特に変更する必要無し。

Color Scheme

ハイライト時のデザインを選べます。当ブログは「agate」を使っています。

You can add some additional CSS rules for better display:

ハイライト時に適応させるCSSを追加できます。「Emanon Pro」においては、preタグ(整形済みテキスト)が、通常のテキストと同じ大きさのため、↓のように記載を変更して、少し文字を小さくしてみました

過去に使っていたシンタックスハイライト

3つのWordPressプラグインの中で、過去に利用していたものを選ぶのですが、ここで「Crayon Syntax Highlighter Compatiable」にチェックを入れておけば、preタグがハイライトされるようになります。
記事作成画面でハイライトしたい部分を「整形済みテキスト」に選択するだけで利用できるのでおすすめです。

Enable [code]code content …[/code] support

codeというショートコードではさんだコンテンツをハイライトさせたい場合は、チェックを入れておきましょう。

 

利用方法

上記の設定項目において、「Crayon Syntax Highlighter Compatiable」にチェックを入れている場合は、ハイライトしたい内容を記事作成画面の「整形済みテキスト」にするだけでOKです。

「整形済みテキスト」を選ぶだけでOK

それ以外の場合は、設定画面の「Plugin Usage」項目で書かれているように[code]というショートコードや<pre><code>というhtmlタグを利用すればOKです(括弧はすべて半角)。

 

Emanon Proの記事にプログラムコードを載せる方法まとめ

「Emanon Pro」を利用している人が、記事内にHTMLのやCSSのコードを載せたいなら、『WP Code Highlight.js』一択です。

もちろん、他のプラグインを導入したうえで、細かくCSSを調整するならどれでも良いですが、めんどくさくないですか?(笑)

手間を省ける部分はしっかりと省きつつ、記事の作成や他のカスタマイズに時間を使いましょう。

ちなみに、当ブログにおいてWordPressテーマ「Emanon Pro」に追加したカスタマイズは、下記のカテゴリに全てまとめていますので、合わせてご覧くださいませ。

参考Emanon Pro カスタマイズ | こまろくNOTE

以上、TSUNJI(@tsunji1983)でした。

Sponsored link