僕たちのような制作者のブログではソースの紹介にシンタックスハイライトをよく用います。 ざっくり説明すると自動でソースコードに色がつくやつです。このサイトでもつかっています。
WordPressでブログを構築するときは定番のように「Crayon Syntax Highlighter」ってプラグインを使っていたのですが、 なんだかソースがごちゃっとしてしまうので、今回は「google-code-prettify」を使ってみました。
google-code-prettifyの導入手順
デフォルトのままでいいのなら導入方法はとっても簡単でfooter.phpに以下を記述
<script src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
手っ取り早く導入するのはこれだけです。jQueryとかもいらないです。
サイトからダウンロードしてくると見た目やら色々調整できるみたいですが、デフォルトでも結構いい感じなのでしばらくはこのまま運用してみようと思います。ちなみにダウンロードは下記URLから。
https://code.google.com/archive/p/google-code-prettify/
google-code-prettifyの表示方法
表示方法はpreタグにclass=”prettyprint”を付与するだけです。
ソースの表示例
表示例にデフォルトに余白やらを調整したSCSSが以下のような感じ
.prettyprint{
@if $type == common{
padding: 1.5em!important;
background: #f7f7f7;
border: none!important;
}
@if $type == screen{
margin-bottom: 50px!important;
line-height: 180%!important;
}
}
全てのページで読み込ませない処理
ちょっと待ってください。もともとソースがごちゃっとするのが嫌で「google-code-prettify」を導入したのに、このままだと全てのページで「google-code-prettify」が読み込まれてしましまいます。
ここで一手間加えて必要な記事のみで読み込めたらいいので条件分岐を追加します。
別にいいや〜って方は読み飛ばしてOKです。
カスタムフィールドを使う場合
僕はカスタムフィールドは超便利なんでAdvanced Custom Fieldsを使っています。Advanced Custom Fieldsのフィールドタイプに真偽値を設定して条件分岐した例。
<?php
$shl = get_field('shl01');
?>
<?php if ($shl == 1): ?>
<script src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<?php endif; ?>
特定のカテゴリだけ読み込む場合
特定のカテゴリだけシンタックスハイライトを使う場合はカテゴリを絞り込めばいいですよね！
<?php if (in_category('カテゴリスラッグ')): ?>
<script src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<?php endif; ?>
特定のページだけ読み込ませるメリット
特定のページだけで「google-code-prettify」を読み込ませる理由は「表示速度対策」です。
「google-code-prettify」だけで表示速度が爆発的に変わるってことはないのですが、積み重ねですね。なるべく不要なjsやcssは読み込ませないように心がけると、いいことがあるかもしれません。
てなわけで導入自体はとっても簡単でした。
