ブログにソースコードを表示する方法や種類について数回に分けて解説してきましたが、今回はその締めくくりとなる導入編の解説をしようと思います。
今回導入するのは「highlight.js」です。
他の解説サイトを拝見したところ、以前はこのプラグインは公開されていなかったようですので良い機会だと思い当サイトで簡単なプラグインの導入手順と設定方法について解説します。
僕も初心者のため専門的な解説サイトが今後出てくるでしょうから、仙台カフェではサクッと導入手順だけ厳選して紹介します♪
今回の内容
「highlight.js」関連の当サイトの記事
「highlight.js」を選んだ理由
- サーバー負荷が少なくサイト表示速度に影響がない
- 他のハイライトプラグインとの互換性もあり途中変更も影響なし
- 初めての導入で気軽に試せる公式プラグインも公開されている
- 設定が初心者でもカンタン（コピペだけ）
「highlight.js」の導入準備
highlight.jsを使ってアナタのブログに綺麗でオシャレなソースコードを表示するために、まずは以下の手順で<head>タグ内に公式サイトから配布されている<script>コードを埋め込みます。
準備１：最新の埋め込みコードを公式サイトから取得
公式サイト：https://highlightjs.org/download/
「cdns」部分のコードをコピー
準備２：埋め込みコードを<head>内に貼り付け
各テンプレートの<head>内に埋め込み
<head>...</head>
場所はどこでもOK！
補足１：反映されない時やカスタマイズしたい時
前回の記事で紹介したちゅんこさんが公開しているコードの最新版が以下コードです。
このままバージョン部分（9.2.0）を変更しそのままコピペしてお使いください。
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.2.0/highlight.min.js"></script>
<script>// <![CDATA[
$(document).ready(function() { $('pre').each(function(i, block) { hljs.highlightBlock(block); }); });
// ]]></script>
補足２：<head>タグの場所
仙台カフェのテンプレートと同じSTINNGER７を使用している場合は以下の場所を参照。
| wordpress管理画面＞外観＞テーマの編集＞STINGER7（親テーマを選択）＞テーマヘッダー（header.php） |
他のwordpressテンプレートを使用している場合も手順はほぼ同じですが、ファイル名が若干異なることもあります。
STINGERでいう「テーマヘッダー(header.php)」の部分ですね。
「header.phpファイル」は比較的簡単に見つけることができると思いますが、見つからない場合は「テーマ名 header.php」などで検索すると解説サイトが見つかるはずです。
プラグイン「highlight.js」の設定方法
公式プラグイン「WP Code Highlight.js」を実際にダウンロード、有効化、その後の設定方法について順に解説します。
プラグイン「WP Code Highlight.js」のダウンロードとインストール
公式サイトから直接ファイルをダウンロードする方法とワードプレスの管理画面内から新規追加する２つの方法があります。
手順は以下。
公式サイトからのDL
公式サイト：https://ja.wordpress.org/plugins/wp-code-highlightjs
wordpress内からのインストール方法
| wordpress管理画面＞プラグイン＞新規追加＞「WP Code Highlight.js」を検索＞「今すぐインストール」 |
インストールが完了したら「有効化」で導入完了です。
プラグインの設定方法とカスタマイズ
有効化できたら以下の順番で設定していきましょう。
ほとんどデフォルトで使うことができますが、設定が必要な項目を下記にまとめます。
設定が必要な項目
- CDN
- Color Scheme
- You can add some additional CSS rules for better display
CDNの設定
デフォルトでは「local」になっていますが、これは自社サーバーなどを利用する場合とのことなので、ここではscriptコードを取得した「Public CDN:cdnjs(highlightjs.org recommend)」を選択。
CDNの設定は以上。
Color Schemeの設定
公式サイト：https://highlightjs.org/static/demo/
この項目でカラーや表示方法を豊富な種類の中から選択することができます。
管理画面上で設定していちいち確認するのは面倒なので、上記の公式サイトでテーマイメージを確認してから設定するとスムーズです。
公式サイトの左側にある「Styles」から色々着せ替えしてみましょう。
着せ替え例（画像）
以上のようにバリエーションに富んでいます（上記キャプチャは極々一部）ので楽しみながら選べますよ^^
プラグインの優れている点はheader.phpを編集しなくてもここからテーマの変更が簡単にできる点です。飽きたら他のテーマに変更するときもここの設定を変えればサイト全体に反映します。
You can add some additional CSS rules for better display
この項目では表示のスタイルを細かく設定することが可能です。
CSSに詳しい人はここの項目に指定のコードを追加することで簡単にカスタマイズできます。
僕の技術では対応できないので、度々登場しているちゅうんこさんが公開されているカスタムコードを導入しました^^
ちゅんこさんありがとうございます♪
CSSの追加設定方法
pre.hljs {padding: 5px;}
pre.hljs code {}
デフォルトで上記のようになっている部分に以下コードを挿入
display: block;
word-wrap: normal;
overflow-x:scroll;
padding: 0.5em;
border-radius:5px;
margin:1em auto;
line-height:1.4;
font-size:90%;
-webkit-text-size-adjust: none;
以下が完成形です。（このままコピペできます）
pre.hljs {padding: 0.5em;
display: block;
word-wrap: normal;
overflow-x:scroll;
border-radius:5px;
margin:1em auto;
line-height:1.4;
font-size:90%;
-webkit-text-size-adjust: none;
}
pre.hljs code {}
このような型紙のようなコードを公開してくださっているデザイナーさんやカスタマイザーさんのブログは本当にありがたいですよね♪
これがあれば数値を変更するだけで好みの大きさなどに近づけることができます。
（僕は特に気に入らないところもなかったので、そのまま使用中です）
ありがたや、ありがたや。
別なプラグインを導入していたなら下記項目も設定が必要
- Syntax Highlighter
- Compatiable Prettify Compatible
- Crayon Syntax Highlighter Compatiable
僕は今回が初めての導入だったので詳しい事は分からないのですが、おそらく他のプラグインを使用して場合の互換性に影響する項目なのかなと推測しました。
（お詳しい方の解説をお待ちしております。）
僕と同じように初めて導入する場合は特に設定は必要ありません！（おそらく^^;）
ブログやサイトに表示が反映しない時の対処方法
投稿内容を記事に反映させるためには<pre>タグで表示したいソースコードを囲んであげる必要があります。
<pre>...</pre>
ソースコードの装飾手順
- ビジュアルモードに表示したいコードを貼り付け
- テキストモードに切り替えて<pre>タグで囲む
僕はビジュアルモードで普段執筆しているので、そのまま表示したいソースコードを貼り付けした後に一度テキストモードに切り替えて<pre>タグで囲んでいます。
AddQuicktagなどのショートコードを登録できるプラグインを利用すれば簡単に囲むことができるのでオススメですよ^^
まとめ
公式サイトからコードを取得し、head内に挿入し、プラグインをインストールし設定するだけで綺麗なソースコードを表示することができました！
こういった記事を書くには不十分すぎる知識と技術を痛感したので、勉強する良いきっかけになりました^^
最近、書くネタが増えすぎて下書きが増えまくっていますので、初心者目線のちょっと痒い所に手が届くブログ記事をしっかり更新していこうと思います。
現在、桜前線と共に”第一次ブログ更新楽しい時期”が到来中の佐々木でした。
コメントを残す