シンタックスハイライト用の超軽量なプラグインprism.jsは、WordPressブログでソースコードをきれいに高速表示してくれます。
WordPressでシンタックスハイライト表示用のプラグインというとSyntax HighlighterやCrayon Syntax Highlighterが出てきますが、どうしても表示が重くモッサリとした印象があるため、私は使用を控えておりました。
オリジナルでCSSデザインして表示させていたのですが、説明の際に行番号をつけたり特定の行をハイライト表示させていた方が分かりやすい。そうなるとソースコードの記述だけで結構面倒な作業になってしまうのです。
どうにかならないかと思っていたら、prism.jsがとても軽量でカンタンに私の要望を叶えてくれたので即採用しました。そこで今回はprism.jsの設定方法についてご紹介していきます。
シンタックスハイライト prism.jsの実際の表示
まずは実際の表示をご覧ください。
HTML
<header class="header">
<h1><img src="https://web-bruno.com/wp-content/themes/bruno/images/logo_b.png" alt="Bruno"></h1>
<nav>
<ul>
<li>サービス案内</li>
<li>料金プラン</li>
<li>実績</li>
<li>よくある質問</li>
<li>お問い合わせ</li>
</ul>
</nav>
</header>
CSS
.header {
display: flex;
justify-content: flex-end;
align-items: center;
}
.header h1 {
margin-right: auto;
}
.header ul {
display: flex;
}
.header li {
margin-left: 3rem;
}
@media screen and (max-width: 768px){
.header {
flex-direction: column;
}
.header h1 {
margin: 0 auto 3rem;
}
.header li {
margin: 0 1rem;
}
}
@media screen and (max-width: 568px){
.header li {
margin: 0 .5rem;
font-size: 1.2rem;
}
}
js
(function ($) {
$(document).ready(function () {
var menuHeight = $(".header-nav").height();
var startPos = 0;
$(window).scroll(function(){
var currentPos = $(this).scrollTop();
if (currentPos > startPos) {
if($(window).scrollTop() >= 200) {
$(".header-nav").css("top", "-" + menuHeight + "px");
}
} else {
$(".header-nav").css("top", 0 + "px");
}
startPos = currentPos;
});
});
}(jQuery));
このようにきれいにシンタックスハイライト表示をしてくれます。コードの記述も簡単で、行単位のハイライト表示も<pre>
に行番号を指定するだけなので、かなり手間を省くことができます。
シンタックスハイライト prism.jsの設定方法
prism.jsはとても簡単に設置できます。
サイトから好みのかたちで設定したjsとcss2つのファイルをダウンロードして、自分のサーバーにアップロード。任意の場所でjsとcssを読み込めばすぐ使用できます。このあたりは他のシンタックスハイライト用のjsと一緒ですね。
prismファイルの設定
まずは、以下のリンク先にて設定をおこないます。
Themes にて表示デザインを決めます。現在7種類のテーマがありますが、私はシンプルなデザインのDefault
を選択しました。
Languages では、シンタックスハイライト表示させる言語を選択します。自分が使用する言語のみを選択することでファイルサイズを最低限にすることができるので、余計なものは選択しない方がいいです。デフォルトでは、Markup
とCSS
、C-like
、JavaScript
の4つが選択されております。私は他に、PHP
、Java
、Sass (Sass)
、Sass (Scss)
を選択。
Plugins では、表示用に追加プラグインを設定できます。行単位でハイライト表示させるLine Highlight
、行番号を表示させるLine Numbers
、何の言語なのかを表示させるShow Language
の3つを選択しました。
この設定で、jsとCSSファイル合計が22.79KBとかなり軽量なものになりました。追加プラグインで、カラーをプレビュー表示してくれる機能などもありますので、そういったものを追加すると若干サイズが大きくなりますが、それでも許容範囲内かと思います。
私が設定した内容をそのまま使用したい場合には、以下のリンク先にて設定済みですので、ファイルをダウンロードしてご利用ください。
HTMLに記述する
以下のソースを任意の場所に記述します。
<link rel="stylesheet" href="prism.css">
<script src="prism.js">
WordPressであれば、header.phpの<head>
内などに以下を記述します。
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/prism.css">
<script src="<?php bloginfo('template_directory'); ?>/prism.js"></script>
これで事前の設定は完了です。
実際に記述してみる
では、prism.jsを使って実際にソースコードをハイライト表示してみましょう。
ベースのHTMLタグを記述する
以下のHTMLタグを表示させたい箇所に記述します。
<pre><code class="language-使用する言語名">
</code></pre>
これがベースのHTMLタグです。
使用する言語名の部分には、以下のものを記述します。
- HTMLの場合
- markup
- CSSの場合
- css
- jsの場合
- javascript
- PHPの場合
- php
まぁ、そのままです。ただし、HTMLのみmarkup
と記述しないといけないので、その点だけは注意が必要ですね。
追加プラグインを記述する
追加プラグインを設定した場合には、HTMLタグ内に追加で記述する必要があります。私の設定の場合は、行単位のハイライトと、行番号の表示、使用言語名の表示(右上)の3つ。表示させるために以下のように追加します。
<pre
class="line-numbers"
data-line="2-3,5"
><code class="language-markup"
data-language="markup"
>
</code></pre>
※説明しやすいようにタグ内で改行しておりますが、実際には改行せずに記述してください。
2行目のclass="line-numbers"
で、行番号の表示。
3行目のdata-line="2-3,5"
で、行単位のハイライト表示。上記の場合は2〜3行目と5行目をハイライト表示させるという設定です。
5行目のdata-language="markup"
で、使用言語名を表示。
このように設定しております。
これを毎回手打ちで記述するのは面倒なので、私はMacの無料入力支援アプリの『Dash』に設定して、ショートカットキーで呼び出すようにしてます。他にも有料の『TextExpander』とか、無料のWordPressプラグイン『AddQuicktag』などを使用してもいいかと。
ブログ更新の一手間を省くために、こういった機能も追加で設定しておくとかなり便利です。
もし入力支援のアプリなどに設定する際は、以下をコピペで設定してみてください。
HTML
<pre class="line-numbers" data-line="1-2,3"><code class="language-markup" data-language="markup">
</code></pre>
CSS
<pre class="line-numbers" data-line="1-2,3"><code class="language-css" data-language="css">
</code></pre>
PHP
<pre class="line-numbers" data-line="1-2,3"><code class="language-php" data-language="php">
</code></pre>
JS
<pre class="line-numbers" data-line="1-2,3"><code class="language-javascript" data-language="javascript">
</code></pre>
HTMLタグを表示する際は実態参照に変換することを忘れずに
HTMLタグを表示する際には、表示部分のHTMLタグを実態参照に変換することが必要になります。
実態参照に変換とは?
<html>
を、<html>といったように変換することを指します。HTMLの場合、このように変換しないとうまく表示されません。
私が実態参照に変換する際に使用しているのが、Macアプリの『PopClip』です。HTMLタグを実態参照に変換してコピーすることができる拡張機能があるので、それを利用してコピーしてます。
ただ、Macユーザーでない場合には、以下のサイトを利用して変換すると便利です。
このシンタックスハイライト用のプラグインprism.js を実際に使用するととても簡単で手間を大きく省くことができます。HTMLタグの際は一手間増えますが、オリジナルCSSを設定したものを手打ちで入力していた頃よりは、かなりラクになりました。
行数を表示させたり行単位でシンタックスハイライトさせたりしたい場合には、やはりjsを使用しないとダメですね。このprism.jsはシンプルなデザインで超軽量。かなり気に入りました。これからも使い続けていきたいと思います。