ソース表示は、軽い『 highlight.js』がオススメ！！

IT系ブログ書いていると、ソース表示する機会が多いですよね。

で、先輩IT系ブロガーさんを見ていて、

「あのキレイにソースをワードプレスで表示しているのってどうするの？」

いう疑問があったのです。

いつものごとく、グーグル先生に聞いて調べてみると、下記２つにほぼ絞られることがわかりました！

「Crayon」の方が、ユーザー数が多いようです。

が、僕は、今後のSEOを考え「highlight.js」を選択することにしました。（理由は後述）

こんな感じの表示になります。

<?php if ( st_is_mobile() ) { ?>
<?php } else { ?>
    <?php wp_enqueue_script( 'scroll', get_template_directory_uri() . '/js/scroll.js', array() ); ?>
<?php } ?>

以下で「highlight.js」を選択した理由と使い方の手順をまとめましたので、いまからソース表示プラグインを組み込む方は、ぜひ参考にしてください！

1 僕が「highlight.js」を選択した理由
2 「highlight.js」を使う方法　手順まとめ
3 うまく設定できているか、確認しよう。
4 まとめ＆失敗談

僕が「highlight.js」を選択した理由

ソース表示にのみ特化している「highlight.js」の方が、「Crayon」よりも動作が軽い。
こちらの記事『モバイルページのスピードがGoogleのランキング要素に加わる予定』にも書いていますが、スマホでの表示スピードがSEOランキングに影響しそうです。ワードプレスは、素人でも機能追加が簡単というメリットがあるのですが、逆に機能を詰め込みすぎて表示スピードが遅くなるというデメリットがあります。

複数言語自動判別（１５５言語）
<pre><code></code></pre>
で囲むだけで、適した表示をしてくれます。ソースによって何も考えなくて良いのは便利ですね。

いろんなカラースタイルが本家からダウンロードできる（７３スタイル）
自分のブログにあったカラーが見つかります！
変更したときもスタイルシートを入れ替えればよいだけで、簡単です。

「ソース表示の見た目」よりも「表示スピード」の方が大事ですので、「highlight.js」を選択したという感じです。

「どうしても行表示をしたい」という方は、「Crayon」になりますね。

「highlight.js」を使う方法　手順まとめ

１．スタイルを選ぶ

「highlight.js」のこちらのスタイルを選ぶ画面を見てください。

左のサイドメニューからスタイル名をクリックしていくと、

右画面のソース表示スタイルが変わっていきます。

気に入ったスタイル名があれば、それをコピーなどして、メモっておいてください。

２－１．スタイルシートを組み込む（スタイルをstyle.css　で管理している方）


@import url('//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/default.min.css');

をstyle.cssに追加してください。

default.min.cssの「default」は、
先ほど選んだ好きなスタイル名称になります。

あなたが選んだスタイルシートに置き換えてください。

２－２．スタイルシートを組み込む（functions.php　で管理している方）

スタイルシート、スクリプトをfunctions.phpで管理している方は、子テーマで次のようになっているはずです。

一括で組み込む方法は、こちらの記事をご参照ください。（⇒【ワードプレス】css,スクリプトは、まとめて一か所で管理）

function theme_enqueue_styles_scripts() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles_scripts' );

以下を追加します。

    if ( is_single() ) {
        wp_enqueue_style('highlight-style','//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/default.min.css');
    }

結果、次のようになります。

function theme_enqueue_styles_scripts() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    if ( is_single() ) {
        wp_enqueue_style('highlight-style','//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/default.min.css');
    }
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles_scripts' );

if(is_single())　は、記事表示中は～　という意味になります。

ソースを表示するケースって、記事表示中以外ないので、この条件を入れています。

３．JSを組み込む（footer.php）

footer.php の最後

<?php wp_footer(); ?>
</body></html>

の手前に以下を追加してください。

<?php // ソースコード表示 ?>
<?php if ( is_single() ) { ?>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<?php } ?>

うまく設定できているか、確認しよう。

新規記事を書いて例えば、以下のようなソースを書いてみましょう。

<pre><code>
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>
</code></pre>

プレビューして、うまく表示できれていれば、OKです。

もし、うまくいっていない場合は、上記手順を１から設定を確認してくださいね。

まとめ＆失敗談

僕は、実は最初にJSを「footer.php」に組み込むべきところを「function.php」に組み込んでしまって、うまくいかず試行錯誤していました。

プラグインは、簡単に導入でき便利ですが、多くなるにつれブログが重くなります。

軽くできるものは、コツコツと軽くしておきたいですね。