こんな人にオススメ!
- コードを色分け(シンタックスハイライト)して綺麗に表示したい。
- Crayon Syntax Highlighterが重いから乗り換えたい。
WordPressでソースコードを表示する時、よく使われているプラグインに、Crayon Syntax Highlighter があります。
インストールするだけで、ソースコードを綺麗に表示してくれ、おまけに高機能なところが人気の秘密ではないでしょうか。
しかし、その裏返しとして、動作が重かったり、多機能すぎて使いにくいと感じる人も少なくないようです。
そこで今回は、シンプルながら美しいデザイン、そして、動作が軽量だと評判のハイライター highlight.js をご紹介したいと思います。
- highlight.jsよりも、もっと良いシンタックスハイライター見つけました!
- 最新記事:WordPressでシンタックスハイライトならPrism.jsが軽量&多機能でベストチョイス
highlight導入のメリットは?
通常、テキストエディタでコードを表示すると、見やすいよう種類別に分類し、色分け表示してくれます。
これを、シンタックスハイライトといいます。
下の画像は、mac用テキストエディタ TextWrangler のスクリーンショットです。
同じコードをWordPress の投稿ページで、そのまま表示すると、以下のようになります。(使用テーマ:Twenty Seventeen )
正直、テキストエディタと違って、WordPresデフォルトのままだと、色分けなんかがされていないので、ちょっと見にくいですよね。
ところが、Crayon Syntax Highlighter などのプラグインを使うと、とっても綺麗にシンタックスハイライトしてくれるんです。
サイトを重くする要因になっていた
しかし、人気のプラグイン、Crayon Syntax Highlighter も万能ではありません。
GoogleのPageSpeed Insights でサイトの速度を検証するとこのような警告が…。
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
このページには、ブロッキング CSS リソースが 1 あります。これが原因で、ページのレンダリングに遅延が発生しています。
犯人は、crayon.min.css となっています。つまり、Crayon Syntax HighlighterのCSSが、レンダリングブロックの原因なんですね。
Crayon Syntax Highlighterは、とってもお手軽に導入できる反面、サイトを重くする要因を作っていたのです。
highlight.js はシンプル軽量なJSライブラリ
WordPress のプラグインではありませんが、シンプル軽量で、とっても評判の良いシンタックスハイライターが highlight.js 。
Crayon Syntax Highlighter と比較すると、Highlight.js は導入に手間がかかるし、行番号も表示されないし、機能は少ないしと、デメリットがたくさんあります。
- 行番号も表示できる軽量なシンタックスハイライター見つけました!
- 最新記事:WordPressでシンタックスハイライトならPrism.jsが軽量&多機能でベストチョイス
しかし、highlight.js には、それらを全部打ち消すほどのメリットがあるんです!
それは、とにかく軽い!!!
とにかく軽量なんで、Crayon Syntax Highlighterの重さに悩んでいる方なら、すぐさま乗り換えを検討してみる価値があると思います。
highlight.js は、WordPressプラグインではなく、javascriptライブラリなので導入に一手間かかりますが、表示速度の向上に貢献するのは間違いありません。
機能は絞られますが、highlight.js のデザインも十分に綺麗ですしね。
highlight.jsの導入方法
それでは、実際にhighlight.jsを導入してきましょう。
導入方法は二種類あります。
- CDNを使って、外部のJSライブラリを呼び出す。
- 自分の管理するサーバーにJSライブラリをダウンロードする
今回は、もちろん高速化が期待できるサーバーにJSライブラリをダウンロードして使用する方法を選択します。
公式サイト https://highlightjs.org/ にアクセスし、Get versionボタンをクリックしてください。
2017/2/7現在、最新バージョンは9.9.0です。
次の画面で、使用する予定の言語を選択してダウンロードしてください。
すると、highlight.zipファイルがダウンロードされるので、解凍して開きます。
必要なのは、highlightフォルダの中の、highlight.pack.js と styleフォルダだけです。
highlight.pack.js がJavaScript本体、そして、styleフォルダには、デザインのための、以下のCSSテンプレート集が入っています。
たくさんありますが、CSSファイルはすべてデザインテンプレートです。
ここから気に入ったものを探しても良いですし、さらに自分なりにアレンジを加えても良いでしょう。
ファイルを呼び出すコードは、functions.phpに記述します。以前であれば、header.phpに以下のように記述して呼び出していましたが、現在は推奨されていない古い方法です。
<link rel="stylesheet" href="/wp-content/themes/twentyseventeen-child/css/highlight/xcode.css">
<script src="/wp-content/themes/twentyseventeen-child/js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
現在、WordPressでCSSとJSを呼び出す時に推奨されているのは、functions.phpで wp_enqueue_style( ) と wp_enqueue_script( ) を使い呼び出す方法です。
こちらの方法でファイルを読み込むのが、正しいやり方です。
add_action( 'wp_enqueue_scripts', 'my_files' );
function my_files() {
//highlight.jsのスタイルシートとJSの呼び出し
wp_enqueue_style( 'highlight-style', get_stylesheet_directory_uri() . '/css/highlight/xcode.css' );
wp_enqueue_script( 'highlight-script', get_stylesheet_directory_uri() . '/js/highlight.pack.js', array('jquery'), '20190220', true );
}
上記を参考に、functions.phpにコードを追記してください。
しかし、これだけでは、まだ使えるようになっていません。highlight.pack.jsをテキストエディタで開いて、一番最後に次の関数を1行追加します。
hljs.initHighlightingOnLoad();
これで、highlight.jsは使えるようになるはずです。
私の場合、highlight に付属していたxcode.cssをカスタマイズして使っていますが、テーマによってデフォルトのCSSに違いがあるので、手を加えてあげる必要があると思います。
一応、参考までに、このサイトでカスタマイズして使っているxcode.css をご紹介して終わりますんで、参考になさってください。
現在、このサイトでは、highlight.jsより多機能・軽量なPrism.jsを使用しています。行番号も表示できるので、とってもオススメです!
- highlight.jsよりも、もっと良いシンタックスハイライター見つけました!
- 最新記事:WordPressでシンタックスハイライトならPrism.jsが軽量&多機能でベストチョイス
/*
XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>
*/
pre {
padding: 0;
word-wrap: normal; /*** 画面から高度がはみ出した時の横スクロール処理 *******/
white-space: pre; /*** word-wrap: normal;とともに、こちらも記述が必要 ***/
}
.hljs {
display: block;
overflow-x: auto;
/*padding: 0.5em;*/
background: #f4f4f4;
color: black;
font-size: 0.8em;
line-height: 1.5;
border: 2px solid #ccc;
padding: 0.9em 1.2em;
border-radius: 7px;
}
.hljs-comment,
.hljs-quote {
color: #006a00;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal {
color: #aa0d91;
}
.hljs-name {
color: #008;
}
.hljs-variable,
.hljs-template-variable {
color: #660;
}
.hljs-string {
color: #c41a16;
}
.hljs-regexp,
.hljs-link {
color: #080;
}
.hljs-title,
.hljs-tag,
.hljs-symbol,
.hljs-bullet,
.hljs-number,
.hljs-meta {
color: #1c00cf;
}
.hljs-section,
.hljs-class .hljs-title,
.hljs-type,
.hljs-attr,
.hljs-built_in,
.hljs-builtin-name,
.hljs-params {
color: #5c2699;
}
.hljs-attribute,
.hljs-subst {
color: #000;
}
.hljs-formula {
background-color: #eee;
font-style: italic;
}
.hljs-addition {
background-color: #baeeba;
}
.hljs-deletion {
background-color: #ffc8bd;
}
.hljs-selector-id,
.hljs-selector-class {
color: #9b703f;
}
.hljs-doctag,
.hljs-strong {
font-weight: bold;
}
.hljs-emphasis {
font-style: italic;
}