はじめまして、de2p株式会社で開発と人事を担当しているT田と申します。
これから不定期に、弊社の開発部社員が技術関連の内容を中心に
このブログで情報発信をしていきますので、よろしくお願いいたします。
記念すべき第1回目は、WordPressでシンタックスハイライトを実現する方法について。
目次
1.はじめに
このブログを始めるにあたり、ソースコードをブログ内で紹介することもあるだろう!
という話が社内で出ました。
ソースコードを素の(飾り付けの無い)テキストで載せるよりも、エディタのように色がついた状態、
つまりシンタックスハイライトで表示させよう!ということになりました。
そこで、
- どのような実現方法があるのか
- その中でどの方法が最適なのか
を調べてみることにしました。
2.実現方法案
まず、このホームページはWordPressで作成されています。
そこで、WordPressでシンタックスハイライトを実現する方法について調べたところ、
大きく以下の3つの方法がありそうだことが分かりました。
イ.SyntaxHighlighter Evolved
ロ.highlight.js
ハ.Prism.js
イ.SyntaxHighlighter Evolved
「WordPress シンタックスハイライト」で検索すると、この情報が上位に出てきました。
シンタックスハイライトの定番「SyntaxHighlighter」の、WordPressのプラグインのようです。
ただ、WordPressの動作が重くなるためプラグインはあまり入れたくありません。
また、この「SyntaxHighlighter」は機能が充実している半面、導入すると動作が重くなるという
情報もありました。
よって、この案は見送ります。
ロ.highlight.js
次に見つけたのがこのライブラリです。
「SyntaxHighlighter」を使っていたけど、そんなに機能はいらない!必要最低限の機能で十分だ!
という考えで作成されているようです。
ただ、このライブラリには行番号表示の機能がありません。
無くても良いですが、あった方が説明するときに便利です。
ということで、この案も見送ります。
ハ.Prism.js
次に見つけたのがこのライブラリです。(サイトはこちら)
行番号表示の機能もあり、自分が必要な機能のみを選んでダウンロードできます。
対応言語も多く、動作も軽いようです。
ということで、この案を採用することにしました。
3.Prism.jsの導入
以下の順で作業していきます。
イ.Prism.jsのダウンロード
ロ.WordPressに導入
ハ.Prism.jsの再ダウンロード(おまけ)
イ.Prism.jsのダウンロード
こちらのサイトにアクセスします。
右上に「THEME:」と書かれたエリアがあります。各テーマをクリックすると、少し下にスクロールした
ところの表示例(Examples)が変化するので、好みのテーマを決めておきます。
私は「OKAIDIA」にしました。
テーマを決めたら、「THEME:」の上にある「DOWNLOAD」ボタンを押下してダウンロードページに
遷移し、必要な機能を選択していきます。
- Compression level: → カスタマイズしない場合は「Minified version」を選択
- Themes → 先ほど決めたテーマを選択
- Languages → 必要な言語を選択 ※HTMLは「Markup」
- Plugins → 必要なプラグインを選択
ちなみに、私は以下のプラグインを選択しました。
Line Highlight : 指定行を強調表示
Line Numbers : 行番号を表示
File Highlight : ファイルを指定してハイライト表示
Show Language : 言語名を表示
Command Line : コマンドライン風に表示
選択が完了したら、「DOWNLOAD JS」「DOWNLOAD CSS」の各ボタンを押下し、
JavaScriptファイルとスタイルシートをそれぞれダウンロードします。
ロ.WordPressに導入
Prism.jsのファイルがダウンロードできたら、WordPressに導入していきます。
最も簡単な方法は、以下の2行を投稿ページなどの入力欄に記述すればOKです。
(パスは環境に合わせて変更してください)
<link rel="stylesheet" href="prism.css" />
<script src="prism.js"></script>
ただ、投稿する度に毎回記述するのは面倒なので、自動で上記コードが<head>
タグに挿入されるようにします。
functions.phpに以下のコードを追記します。
<?php
function addSyntaxHighlightScript()
{
echo '<link rel="stylesheet" href="prism.css" />';
echo '<script src="prism.js"></script>';
}
add_action( 'wp_head', 'addSyntaxHighlightScript' );
?>
まず、Prism.jsのタグを出力する関数 addSyntaxHighlightScript() を定義します。
そして、その関数を「wp_head」にフックするようにします。(7行目)
これで導入は完了です。
ただ、上記だとWordPressの全ページにPrism.jsのタグが出力されてしまいます。
全ページに必要な場合はOKですが、投稿ページ以外には必要ない!という場合は以下のようにします。
<?php
function addSyntaxHighlightScript()
{
if ( !is_single() ) {
return;
}
echo '<link rel="stylesheet" href="prism.css" />';
echo '<script src="prism.js"></script>';
}
add_action( 'wp_head', 'addSyntaxHighlightScript' );
?>
4~6行目を追記しました。
is_single() 関数で投稿ページかどうかを判定し、投稿ページでない場合は処理を行わない
ようになりました。
ハ.Prism.jsの再ダウンロード(おまけ)
必要な言語を選んでPrism.jsをダウンロードしたけど、後になって新しく違う言語が必要になった!
ということがありそうです。
その際、また最初から言語やプラグインを選択し直すのは面倒だし、そもそも何を選択したのか
覚えていない…
でも大丈夫! ダウンロードしたスタイルシートの1行目を見てみると…
自分が選択した言語やプラグインが含まれているURLが書いてあります!
そしてこのURLにアクセスしてみると…
すでに言語やプラグインが選択された状態でダウンロードページが表示されました!
後になって言語などを追加する場合は、このURLを使えば良さそうです。
4.おわりに
今回は、WordPressでシンタックスハイライトを実現する方法を選定し、実際に導入するところまでを
行いました。
次回は、Prism.jsの具体的な使い方についてお伝えしますのでお楽しみに!
<スポンサーリンク>
- 投稿タグ
- HTML, Prism.js, シンタックスハイライト
Hey very nice blog!! Man .. Beautiful .. Amazing .. I’ll bookmark your website and take the feeds also I am happy to find a lot of useful info here in the post, we need work out more techniques in this regard, thanks for sharing. . . . . . bddfgdeecebf
Hey there. I discovered your website by the use of Google whilst searching for a comparable subject, your web site got here up. It looks good. I’ve bookmarked it in my google bookmarks to come back then.
Would you be concerned with exchanging links?
very nice post, i actually love this website, keep on it
You made some respectable factors there. I appeared on the internet for the difficulty and found most individuals will associate with together with your website.
This really answered my downside, thanks!
Pingback: WordPressにprism.jsを導入してコードハイライトしてみるが… – 日々是更新
Pingback: 簡単にWordPressにPrism.jsを反映する | ただのエンジニアのブログ