【WordPress】ソースコード表示方法 & エディタ風カスタマイズ方法まとめ

WordPress

みなさんこんにちわ、にゃーお。です^^

記事の中でソースコードを表示して説明したい時ってありますよね。
ソースコードって情報として文章以上に重要な意味を持っているものです。テキストのようにさらっと表示させるのも寂しいですよね、と自分の記事を見ながらどこかでカスタマイズしたいなと思い今回やってみました!
今回は表示方法とカスタマイズ方法をコードサンプルと合わせてご紹介します!

スポンサーリンク

記事にソースコードを表示する方法



記事で表示させてみたい!と思ってそのままソースコードをコピーして貼り付けても、記事自体がHTMLのbodyコードとして読み込まれますのでそのまま貼り付けてもコードが表示されません(そのまま実行された表示になったり、丸々表示されずに空白になったりします)。
これをソースコードとして表示するには「この部分はソースコード表示用ですよ〜実行しないでね」という記述を記事内で行う必要があるんです。

<pre>要素と<code>要素、エスケープ処理



表示させたいソースコードを「表示用」として認識させるには<pre>要素と<code>要素、エスケープ処理を使います。
ん??なにそれ難しそう・・と思うかもしれませんが超簡単!コピペでOKです。

<pre>要素とは??

<pre>要素とは”Preformatted text”という意味を示す文字列の事で、表示される文字列が整形済みである事を示すことができます。
<pre> ◯◯◯ </pre>と囲むと、◯◯に記載されるテキストレイアウト(空白や改行など)が全てそのままタグを打たなくても適用されます。

<code>要素とは??

<code>要素とは”Computer code”という意味を示す文字列の事で、Google ChromeやEdge、Safariなどのブラウザが認識する文字列(ソースコード、HTML要素名、ファイル名、他)に対して使用します。
<code> ◯◯◯ </code>と囲むと、囲んだ部分を通常の記事テキストではなくソースコードであると認識させる事ができます。

<pre>要素+<code>要素で合体!

上述の <code> ◯◯◯ </code>で「◯◯は表示用ソースコードですよ、そのまま実行しないでね」とGoogle ChromeやEdge、Safariなどのブラウザに認識させつつ、更に<pre> </pre>で囲む事で◯◯部分のコード部分で<BR>タグ等を打たなくてもコードの内容がレイアウトそのままにコピペしたまま表示できるようになるんです。これは便利!!

そのままでは有効にならない、ここでエスケープ処理

早速やってみよう!と思ってコピペしてみてもうまく表示できないでしょう。。。

なぜ??という事なんですが、
<pre> ◯◯◯ </pre>や <code> ◯◯◯ </code>をブラウザはこれを文字列と解釈してくれないのです。
<pre> ◯◯◯ </pre>や <code> ◯◯◯ </code>で使うような「<」と「>」を「特殊文字」と言うのですが、ブラウザが文字列と認識しないのは「特殊文字」を使用するためです。

ですがWebページの作成をはじめプログラムを書く際には必ずと言っていいほど「<」と「>」を使用します。
そこでこの「特殊文字」を文字列として認識させるために「エスケープ処理」という文字変換の処理方法を行ないコードを書き換えます。

文字変換の例:

・[ < ] -> [ &lt; ]
・[ > ] -> [ &gt; ]
・[ > ] -> [ &amp; ]

特殊文字をまとめたサイトを拝見したので以下ご紹介します。

HTML特殊文字コード表


コードサンプル

以下サンプルです。

■ 記事で実際に記載するコード

 &lt;pre&gt;  &lt;code&gt;  サンプルです &lt;/code&gt; &lt;/pre&gt;

■ 実際の表示

<pre> <code> サンプルです </code> </pre>

変換が面倒そうですが、変換したいコードをコピペするだけで自動で変換を実施してくれるWebサイトも多くありますので自動変換してやれば楽チンですよ^^
以下ご参考までにご紹介します。

https://tech-unlimited.com/escape.html

スポンサーリンク

エディタ風表示のカスタマイズ!



さてここからが本番。ソースコードを表示できるようになったのですが、残念ながら表示は通常のテキストになってしまい寂しいです。色々なブログで表示されているようなエディタ風にしてみたいですよね。タグ部分の要素を色違いにしたり・・
今回はソースコード表示部分を自動で変更してくれる方法をご紹介します。

カスタマイズ方法いろいろ



カスタマイズするには表示形態を変更する必要があるため、何かしらスクリプトを組んで表現をアレンジするか、CSSで擬似的に表示するしかありません。でも以前記事にしたWebフォントのようにライブラリ形式で公開してくださっている所もありますので自分でいちから自作しなくてもいけます!

1.WordPressテーマ機能によるサポート(Cocoon)
 -> ライブラリを使う部分をテーマ内のコードで最初から組み込んで頂いているパターンです。有り難いですね。

2.WordPressプラグインの活用
 -> プラグインで実現できるパターンです。導入は簡単ですが、処理が重くなる等の弊害が・・

3.Javascriptのライブラリの活用
 -> Webフォントのようにライブラリ形式で公開されている物を使うパターンです。設定も楽で処理も早い!
 ※ただし、WordPressの場合、テーマによってはヘッダを編集できない物があるため注意。

4. CSSで擬似的に表現
 -> backgroundやcolor、インライン等をCSSで表現するパターンです。こちらも作ってしまえば処理は早いです。が、1つ1つ手作業でテキストに対して設定を適用する必要があるため、結構きついかも。。使用しているレンタルサーバーやブログサービスでJavascriptが使用できない環境の場合は良いと思います。

で、どれが一番良い??

一番良いのは設定に必要なソースコードの保守性が高く、自分で作成したり編集する負担が少ない物が理想的です。
かつSEOの意味でも処理速度が重くなる物は極力避けた方が良いです。後は表現上のデザインでどこまで表現できるか、ですかね。

個人的には

■ WordPress初心者であれば、

WordPressテーマ機能>軽量のWordPressプラグイン>Javascriptプラグイン>CSS

■ある程度自分でFTPでファイルアクセスし編集できる人であれば、
(保守性と拡張性を優先、という意味で)

WordPressテーマ機能>Javascriptプラグイン>軽量のWordPressプラグイン>CSS

でしょうか。WordPressで無い人の場合は、Javascriptプラグインを優先して検討、
Javascriptの利用ができない環境の人の場合は、CSS自作一択になってしまいます。


それでは次は順番に設定方法をご紹介します。

WordPressテーマ機能によるサポート(Cocoon)

ソースコードをハイライト表示させる方法
テーマ内でソースコードをハイライト表示し、見やすくする方法の紹介です。highlight.jsプラグインのみを利用したシンプルなものを実装しています。

本当に有り難い神テーマです。今回の記事のような機能も組み込まれて無料ですよ。
設定画面で設定して完了です。超ラクちん・・!

WordPress管理画面のサイドメニューから「Cocoon設定」->「コード」タブをクリックで設定画面になります。

「ハイライト表示」にチェックを入れましょう。
これで終わりですよ!?簡単すぎる・・

「ハイライトスタイル」を選択すると色々選べます。デフォルトは「monokai」です。

こちらで表示サンプルが公開されています。好みの物を選びましょう。

highlight.js demo

更にこの表示をカスタマイズ可能ですが、それはまた追って別の記事でまとめたいと思います。

※ハイライト表示を部分的にやめたいとき

ハイライト表示させたくない場合は、<pre class=”nohighlight”>と記入すればOKです。

もう1つ注意点、プラグインと併用するとプラグインで事前に設定したCSSスタイルが優先して適用されてしまう可能性があります。注意しましょう。

WordPressプラグインの活用



有名所をいくつかご紹介。プラグインはメンテ等のリスクもあるので利用にはご注意を。

・Crayon Syntax Highlighter

PHPとjQueryで作成されたシンタックスハイライタープラグインです。WordPressブロガーで使用している人は多いのではないでしょうか。言語も多くサポートされており、多機能で評価も高いです。ただ処理が重くなるとの声も多いです。


・Code Prettify

Googleが提供するJavascriptのライブラリ「code-prettify」の利用をプラグインでサポートしたものです。
これは良さげですね。まだ公開されて10ヶ月ですが、評価も高いです。


Mivhak Syntax Highlighter

軽量化!が謳い文句のプラグインです。
シンプルにシンタックスハイライトされ、表示エリアもカスタマイズできます。これも良さげですね〜
こちらも現時点で公開されて11ヶ月ですが、評価も高いです。


Prism Syntax Highlighter

Javascriptのライブラリ「prism.js」の利用をプラグインでサポートしたものです。
設定画面上で使用するテーマと対象の言語、利用するプラグインを選択したら設定保存して完了。これだけで反映されます。
こちらは公開されて1年、上記プラグイン同様に評価も高いです。

Javascriptのライブラリの活用



上記WordPressプラグインでカバーされている物が多いですが、こちらはWebで公開されているライブラリを活用するパターンです。当然、WordPressである必要はなく、Webページの形態関係無く広く利用可能です。かつ、非常に高速に動作します。

どれもやり方は大体共通です。
・CDN(Content Delivery Networkサービス、ファイルのアップロード不要)で利用する場合はスクリプトを呼び出すコードを記載する。
・もしくはJavaScriptファイル、CSSファイルをダウンロードし所定の場所へアップし、スクリプトを呼び出すコードを記載する。
・<pre><code>◯◯◯</code></pre>のコードのなかで、クラス指定して呼び出す。


では有名所をいくつかご紹介。


・Google code-prettify

Google Code Archive - Long-term storage for Google Code Project Hosting.

さきほどWordPressプラグインでもご紹介した、超有名なGoogleが提供するJavascriptのライブラリです。
利用実績も多くGoogleによるコード提供ですので信頼性が高いです。


・highlight.js

highlight.js

こちらも非常に有名な jQueryプラグイン(Javascriptライブラリ)です。上記のCocoonテーマ機能でサポートしているシンタックスハイライト機能はこのプラグインを使用しています。上記Cocoonテーマのパートでご紹介した通り、対応言語の豊富さとデザインテーマ(パレット)の多さが魅力です。


・prism.js

Prism

個人的に気になっている、こちらも有名なJavaScriptとCSSで実装されたシンタックスハイライターです。
上記ライブラリ同様、対応言語の豊富さとデザインテーマや拡張プラグインが豊富です。
こちらの更なる特徴はデフォルトで行番号を含めたレイアウト設定が簡単にできる事ですかね。


導入方法


導入の方法が分かるようにGoogle code-prettify を例に少し補足します。

1)オフィシャルのページにアクセスしましょう。Git-Hubで公開されています。

google/code-prettify
Automatically exported from code.google.com/p/google-code-prettify - google/code-prettify

以下のコードを使います。
ファイルをアップロードせずともこのURLを参照するだけでライブラリを使えます!超楽チン!

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

2)Javascriptコードを読み込みさせます。

WordPressで利用する場合、CDN(Content Delivery Networkサービス、ファイルのアップロード不要)で対応できますのでWebフォントのようにコードコピペで導入できます。
WordPress管理画面から「外観」->「テーマ編集」で「function.php」を選択します。

「wp_register_script」関数でjavascriptファイル(ここではURLで指定)を登録し、「wp_enqueue_script」関数で読み込みを実行するようにします。

add_action('wp_enqueue_scripts', 'themeslug_enqueue_script');
function themeslug_enqueue_script(){
wp_register_script('google-code-prettify-js', 'https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian', null, null, false);
wp_enqueue_script('google-code-prettify-js');
}

Reference: WordPress Codex 日本語版 Webサイト

https://wpdocs.osdn.jp/関数リファレンス/wp_register_script

https://wpdocs.osdn.jp/関数リファレンス/wp_enqueue_script

3)<pre><code>◯◯◯</code></pre>で実行

<pre> ◯◯◯ </pre>部分に[class=”prettyprint”]を追記すれば反映されます。

<pre class="prettyprint"><code>   サンプルです </code></pre>

やり方を覚えれば簡単に設定ができます。

CSSで擬似的に表現



最後はCSSのテキスト装飾で擬似的に表現するものです。

コード表示する領域を「リスト」として表現し、CSSで装飾設定します。
再現させる所までは割愛しますが、概要だけご紹介します。

・「ol」タグ(Ordered Listの略)で設定。
「ol」形式のクラスを設定します。

サンプル例:

ol.codelist{
position:relative;
margin: 0px;
padding:10px 10px 10px 45px;
border:none;
background:#43484B;
}

あとは設定したクラスを記事編集時に呼び出せばOKです。

サンプル例:

<ol class="ol.codelist">
<li>◯◯◯</li>
<li>◯◯◯</li>
<li>◯◯◯</li>
<li>◯◯◯</li>
</ol>

リストにすることで行単位でハイライト設定したり、Webフォントの追加も個々に設定しやすくなります。
行番号も自動で付与されますので番号を付けたい方には良いかと思います。

スポンサーリンク

さいごに



長々とした記事になってしまいました。。最後までお付き合い頂きましてありがとうございました。

今回記事を作成していくにあたり、色々情報を整理していたのですが実現方法が非常に多くあって全体的に俯瞰できるものが無くて整理するのがとても難しかったです。それだけニーズのあるカスタマイズなんですね。

今回の記事が少しでもカスタマイズ方法を選択する際の参考になれば幸いです。

またプラスアルファのカスタマイズは別途記事にしていきたいと思います。ではでは。

コメント