Prism.js 軽量・簡単なJavaScriptシンタックスハイライターの使い方

2018年1月6日

Prism.js 軽量・簡単なJavaScriptシンタックスハイライターの使い方

ソースコードを見やすくしてくれるシンタックスハイライター（Syntax Highlighter）、WordPressプラグインでもいろいろシンタックスハイライターはあるけれど、多機能だけど重いものや使い方が複雑なSyntax Highlighterが多い。

Prism Syntax Highlighter（Prism シンタックスハイライター）は軽量・簡単・多機能なJavaScriptシンタックスハイライター。使いたいテーマ・言語・機能を選んで、prism.jsとprism.cssをダウンロードしてセットすれば使える。

Prismの使い方

軽量・簡単・多機能なJavaScriptシンタックスハイライター『Prism Syntax Highlighter（Prism シンタックスハイライター）』使い方。Prismで使いたいテーマ・言語・機能を選んで自動生成されるprism.jsとprism.cssをダウンロードしてくるところから、Prismを設置して、Prismでソースコードをハイライトするやり方まで。

Prismを入手 prism.jsとprism.cssをダウンロードしてくる

Prism Syntax Highlighter
Prism Syntax Highlighter

Prismのページに行き、右上の「DOWNLOAD」をクリックすると使いたいテーマ・言語・機能を選ぶと自動でprism.jsとprism.cssを生成してダウンロードできるページに移動する。

prism.jsとprism.cssを生成してダウンロードできるページ
prism.jsとprism.cssを生成してダウンロードできるページ

右側に縦書きで「THEME:」と書いてあるところに丸いアイコンが７つ縦に並んでいるが、クリックして選択するとページの下の方で選んだテーマのプレビューができる。

ファイルの圧縮レベルを選ぶ

ファイルの圧縮レベルを選ぶ
ファイルの圧縮レベルを選ぶ

「Minified version」でいいんじゃない。

７つのテーマから選ぶ

７つのテーマから選ぶ
７つのテーマから選ぶ

７つのテーマから使いたいテーマにチェックを入れる。ちなみに私は「Okaidia」を選んだ。

使いたい言語を選ぶ

使いたい言語を選ぶ
使いたい言語を選ぶ

使いたい言語にチェックを入れる。ちなみに私は、Markup(html)・CSS・CSS Extras・C-like・JavaScript・PHP・PHP Extrasを選んだ。

使いたい機能（プラグイン）を選ぶ

使いたい機能（プラグイン）を選ぶ
使いたい機能（プラグイン）を選ぶ

私は「Line Highlight」（任意の行の色を変える）、「Line Number」（行番号表示）、「Show Language」言語を表示するプラグインを選んだ。下のほうにJavaScriptとCSSあわせてファイルサイズは25.05KBと出ている。

生成されたprism.jsとprism.cssをダウンロード保存

生成されたprism.jsとprism.cssをダウンロード保管
生成されたprism.jsとprism.cssをダウンロード保管

生成されたprism.jsとprism.cssを青いボタンおよびオレンジ色のボタンをクリックしてダウンロード保存しておく。

Prismの設置 prism.jsとprism.cssを設置

<link rel="stylesheet" type="text/css" href="prism.css" media="all" />
<script type="text/javascript" src="prism.js"></script>
</head>

サーバーにダウンロード保存したprism.jsとprism.cssをアップロードし、prism.jsとprism.cssを読み込むようにhtmlヘッダーに設定する。

Prismの設置 静的htmlサイト

普通の静的htmlサイト（今時珍しいか）の場合は、prism.jsとprism.cssの設置した場所（URL）を指定、外部styleシート（cssファイル）でcssを管理してるならprism.cssの中身をcssファイルにコピペすればいいんじゃないかな。

Prismの設置 WordPressの場合

WordPressの場合は、prism.cssの中身をゴリゴリとテーマのstyleシートにコピペしてもいいかもしれない。prism.jsはよくない方法だけど、テーマのheader.phpに直で記述するのが一番簡単な設置の仕方かもしれない。

WordPressに独自のCSSやJSを読み込む推奨されてる方法は、独自のCSSやJSの外部ファイルをfunctions.phpで登録、登録したCSSやJSの外部ファイルを読み込む順番を指定するというもの。WordPressに独自のCSSやJSの外部ファイルを読み込む方法は後日備忘録する予定。

Prismの設置 Luxeritasの機能を使う場合

「Luxeritas（ルクセリタス）でSEO的に巧い・速い・安いWordPress無料テーマは決まり」で紹介しているLuxeritasの機能でprism.jsとprism.cssを読み込むというか、prism.jsとprism.cssを結合・圧縮して取り込む。Luxeritasの機能を使って読み込む（取り込む）方法の詳細はこれまた後日備忘録する予定。

Prismでソースコードをハイライトするやり方

Prism ダウンロードページで使いたいテーマ・言語・機能を選んで自動生成されるprism.jsとprism.cssをダウンロード、Prismを設置して、いよいよPrismでソースコードをハイライトする。

普通にソースコードをハイライトする

<pre><code class="language-ハイライトする言語">●●●●●●
●●●●●● ●●●●●● ●●●●●●
●●●●●●</code></pre>

例：HTMLコード（<head>部分）をPrismでハイライトする

<pre><code class=”language-markup”><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8″ />
<title>WordPress PC WEB あれこれ堂的備忘録</title>
<meta name="description" content="WordPressのカスタマイズやプラグイン、
パソコン設定やアプリ、
レンタルサーバーの設定やレビュー、
ウェブ・ネット・SNSについてやアフィリエイトについての備忘録" />
<link rel="stylesheet" type="text/css" href="prism.css" media="all" />
<script type="text/javascript" src="prism.js"></script>
</head></code></pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>WordPress PC WEB あれこれ堂的備忘録</title>
<meta name="description" content="WordPressのカスタマイズやプラグイン、
パソコン設定やアプリ、
レンタルサーバーの設定やレビュー、
ウェブ・ネット・SNSについてやアフィリエイトについての備忘録" />
<link rel="stylesheet" type="text/css" href="prism.css" media="all" />
<script type="text/javascript" src="prism.js"></script>
</head>

ハイライトする言語のところに、cssやphpやjavascriptなど言語名をいれる。HTMLの場合はhtmlではなくmarkupとする。HTMLタグの場合HTML エンティティ変換が必要になる（他の言語でも特殊文字の変換が必要な場合がある）。HTML エンティティ変換、特殊文字の変換についてはまたまた後日備忘録で。

行番号を表示してソースコードをハイライトする

<pre class="line-numbers"><code class="language-ハイライトする言語">●●●●●●
●●●●●● ●●●●●● ●●●●●●
●●●●●●</code></pre>

例：phpを行番号付きでPrismでハイライト表示

<pre class="line-numbers"><code class="language-php"><?php
function get_post_views( $postID ) {
$count_key = 'post_views_count’;
$count = get_post_meta( $postID, $count_key, true );
if ( $count == " ) {
delete_post_meta( $postID, $count_key );
add_post_meta( $postID, $count_key, '0’ );
return “まだアクセスがありません";
}
return $count . ' ';
}</code></pre>
<?php
function get_post_views( $postID ) {
    $count_key = 'post_views_count';
    $count     = get_post_meta( $postID, $count_key, true );
    if ( $count == '' ) {
        delete_post_meta( $postID, $count_key );
        add_post_meta( $postID, $count_key, '0' );
        return "まだアクセスがありません";
    }
    return $count . '';
}

<pre class="line-numbers"><code class="language-php">の後で改行すると実際のコードの行番号とPrismで表示している行番号がずれてしまう。１行目を<pre class="line-numbers"><code class="language-php"><?phpのように改行しないで続ける必要がある。

指定した行の色を変えてソースコードをハイライトする

<pre class="line-numbers" data-line="1,4-6,10″><code class="language-ハイライトする言語">●●●●●●
●●●●●● ●●●●●●
</code></pre>

例：phpコードの１行目と４～６行目と１０行目の色を変えPrismでハイライト表示

<pre class="line-numbers" data-line="1,4-6,10″><code class="language-php">function display_post_top_thumbnail( $content ){
if( has_post_thumbnail() === true ) {
global $post;
$content = '<div class="post-top-thumbnail">’ .
get_the_post_thumbnail( $post->ID, 'full’ ) .
'</div>’ . $content;
}
return $content;
}
add_filter( 'hoge_content’, 'display_post_top_thumbnail’, 11, 1 );</code></pre>
function display_post_top_thumbnail( $content ){
	if( has_post_thumbnail() === true ) {
		global $post;
		$content = '<div class="post-top-thumbnail">' .  
                get_the_post_thumbnail( $post->ID, 'full' ) . 
                '</div>' . $content;
	}
	return $content;
}
add_filter( 'hoge_content', 'display_post_top_thumbnail', 11, 1 );

1や10など１行単位で指定ができ、4-6など複数行の指定も可能。1,4-6,10など複合した形で行の指定もできる。複数行指定、複合指定する場合はカンマ区切り。

テーマの指定した行の背景色があまり目立たない場合はprism.cssの.line-highlightのところを適当にいじって変える。ただし、色をHSLa指定しておりわかりづらい上にグラデーションもかけているのでチンプンカンプン。とりあえずいろいろいじってみて上の様な色になった。

Prism.js JavaScriptシンタックスハイライター良いようだ

俺の頭でりっぱなコードをかけるわけがないので、Prismで十分すぎる。今のところちゃんと動いてくれるし、ほとんどコピペのコードばかりなのだから、ありがたいJavaScriptだ。

PageSpeed Insightsでも１００点満点なので重くはなっていないようだ。まあ私の場合、HTML エンティティ変換して貼りつけるだけで十分なんだけど、ソースコードを見やすくしてくれ（見栄え良くか？）軽量で十分な機能があるのでPrism.jsは便利で重宝しそうだ。

JavaScriptJavaScript,Prism.js,シンタックスハイライター,Syntax Highlighter

Posted by あれこれ堂