シンタックスハイライトの決定版！超軽量でシンプルなprism.js設定方法

シンタックスハイライト用の超軽量なプラグイン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ファイルの設定

まずは、以下のリンク先にて設定をおこないます。

prism.js

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はシンプルなデザインで超軽量。かなり気に入りました。これからも使い続けていきたいと思います。

シンタックスハイライト prism.jsの実際の表示

HTML

CSS

js

シンタックスハイライト prism.jsの設定方法

prismファイルの設定

HTMLに記述する

実際に記述してみる

ベースのHTMLタグを記述する

追加プラグインを記述する

HTML

CSS

PHP

JS

HTMLタグを表示する際は実態参照に変換することを忘れずに

関連記事

WordPressテーマ制作時に頻繁に使用するWordPressタグのまとめ Vol.2

CSSボタンを演出する155個のHoverエフェクトまとめ

パンくずリストをWordPressにプラグインなしで実装する方法

Google日本語フォントが9種類登場。遅延が少なく可読性も良い

iOS版Twitter公式アプリのブラウザで表示が崩れる際のとても簡単な修正方法

来年こそはSVGを活用してみよう！絶対使いたくなるサンプル37個をご紹介

オリジナルのTwitterフォローボタンを作成する方法

人気記事

CSSボタンを演出する155個のHoverエフェクトまとめ

Font Awesomeの設定方法とよく使うアイコンフォント50個まとめ

来年こそはSVGを活用してみよう！絶対使いたくなるサンプル37個をご紹介

flexbox[CSS3]で実践的なレイアウトを。実際の現場で使うflexboxの4パターン

新人デザイナーはこれで勉強しよう！無料ダウンロードできるSketch3テンプレート21個

Web制作者が厳選したブックマークを晒してみる。Webツールやデザインサイトなど30選