prism.js コードを見やすく表示するシンタックスハイライター設定方法と使い方

HTMLやCSSのスクリプトやプログラム言語のコードを記載する際に見やすく表示することがきる prism.js をワードプレス(WordPress)で利用するための設定方法を解説します。

この記事を見ることで得られるメリット

prism.js の詳細な設定方法と使い方がわかります

prism.js で実現できること

prism.js を導入するとブログサイトに表示するHTMLやCSS、PHPなどのスクリプトコードを見やすくカラフルに表示できます。
prism.cssファイルで背景色などの見た目を変更できます。

HTML等のスクリプトやプログラムコード等を見やすく表示してくれる
WordPressのコードを見やすく表示するプラグインよりも軽量で綺麗

WordPrssのテーマファイルを直接編集するためWordPrssのプラグインを利用するよりも敷居の高い方法になります

prism.js の設定方法

prism.js をダウンロードしてWordPressに設置してWordPrssに設定する方法を解説します。

prism.js設定の流れ

prismサイトにアクセスします
テーマとプログラミング言語、プラグインを選択してPrism.jsとprism.cssファイルをダウンロードします
レンタルサーバーの任意のディレクトリに➁でダウンロードしたファイルをアップロード
functions.phpにコードを追記する

①prismサイトにアクセス

↓prismのサイトにアクセスします。

https://prismjs.com/download.html

➁Prism.jsとprism.cssファイルをダウンロード

prismのサイトで下記を選択します

テーマ(Themes)
プログラミング言語(Languages)
追加機能(Plugins)

圧縮レベルとテーマを選択

↑開発版(Development version)と縮小版(Minified version)があるので縮小版(Minified version)を選択します。

テーマ(Themes)は8種類あるので好きなものを選択します。当記事の下に全テーマの写真を載せているので参考にするか、
Prismサイト右側にあるテーマボタンを押すとページ下部にプレビュー表示されるので確認できます。

記載予定のプログラミング言語を選択

↑Languages(言語)でプログサイトの記事に記載予定があるプログラミング言語を選択します。

言語によって自動的に複数選択されるのは依存関係があるからです

追加機能を選択

機能追加(Plugins)の詳細
機能(Plugins)名	意味
Line Highlight(ラインハイライト)	特定の線や線の範囲を強調表示
Line Numbers(行番号)	行番号を表示
Show Invisibles(インビジブルを表示)	タブや改行などの非表示の文字を表示
Autolinker(オートリンカー)	コード内のURLと電子メールをクリック可能なリンクに変換
WebPlatform Docs(WebPlatformドキュメント)	コードをWebPlattform Docsにリンクさせる
Custom Class(カスタムクラス)	Prismのクラスを編集してカスタムできる
File Highlight(ファイルのハイライト)	外部ファイルを取得し、Prismで強調表示
Show Language(言語を表示)	強調表示された言語をコードブロックで表示
JSONP Highlight(JSONPハイライト)	JSONPを使ってコンテンツを取得し、強調表示
Highlight Keywords(キーワードを強調表示)	コード中の特定のキーワードに独自CSSを設定
Remove initial line feed(最初のラインフィードを削除する)	コードブロックの最初の改行を削除
Inline color(インラインカラー)	スタイルシートの色の小さなインラインプレビューを追加
Previewers(プレビューア)	コードの結果をマウスホバーでプレビュー
Autoloader(オートローダー)	必要な言語を自動的にロードして、コードブロックを強調表示
Keep Markup(マークアップを維持する)	ハイライト中にカスタムマークアップがドロップアウトされるのを防止
Command Line(コマンドライン)	プロンプトと、オプションでコマンドからの出力/応答を含むコマンドラインを表示
Unescaped Markup(エスケープされていないマークアップ)	エスケープせずにマークアップを記述
Normalize Whitespace(空白を正規化する)	コードブロックの空白を正規化するための複数の操作をサポート
Data-URI Highlight(データURIハイライト)	data-URIコンテンツを強調表示
Toolbar(ツールバー)	プラグイン用のツールバーをアタッチして、コードブロックの上部にあるボタンを簡単に登録
Copy to Clipboard Button(クリップボードにコピーボタン)	クリックするとコードブロックをクリップボードにコピーするボタンを追加
Download Button(ダウンロードボタン)	コードファイルをダウンロードするツールバーのボタン
Match braces(中かっこを一致させる)	一致する中括弧を強調表示
Diff Highlight(差分ハイライト)	diffブロック内のコードを強調表示
Filter highlightAll(フィルターhighlightAll)	強調表示する要素をフィルタリング
Treeview(ツリー表示)	ファイルシステムのツリー構造を表示

↑追加機能を選択します。おすすめは下記のとおりです。

おすすめの追加機能(Plugins)

Line Highlight
指定行をハイライト表示
Line Numbers
行番号を表示
Command Line
右側に表示される＃やlocalhostなどを表示
Normalize Whitespace
先頭の自動空行挿入を抑制
Copy to Clipboard Button
コピーボタンを表示

Copy to Clipboard Buttonを選択すると自動的にToolbarも選択されます。

JSとCSSをダウンロード

↑ページ一番下のJSをダウンロードボタンとCSSをダウンロードボタンを押してファイルをダウンロードします。

③ダウンロードしたファイルをアップロード

レンタルサーバーに➁でダウンロードした2つのファイルを任意のディレクトリにアップロードします。

WordPressの子テーマを使っている場合はそちらにアップロードしてもOKです。

下記を参考にしてください。

Prism.jsの設置場所：/wp-content/themes/テーマ名/js
prism.cssの設置場所：/wp-content/themes/テーマ名/css

④functions.phpにコードを追記

WordPressのテーマファイル functions.php に下記コードを追記します。

function load_prism_scripts() {
  $theme_uri = get_template_directory_uri();
  wp_enqueue_script( 'prism-js', $theme_uri . '/js/prism.js', array('jquery'), false, true );
  wp_enqueue_style( 'prism-css', $theme_uri . '/css/prism.css');
}
add_action( 'wp_enqueue_scripts', 'load_prism_scripts' );

functions.phpファイルのあるディレクトリは/wp-content/themes/テーマ名です。

これでprism.js の設定は完了です。

prism.js の使い方

prism.jsの機能を使って投稿ページにソースコードを記載するときは<pre><code>タグで挟みます。

<code>の中に「class=”language-○○”」とプログラム言語を指定するのは必須になります。

↓スクリプト、プログラム言語毎の指定用フレーズは下記のサイトに載っています。
https://prismjs.com/index.html#supported-languages

<pre><code class="language-Markup">
<！DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "utf-8">
<title>HTML-コードの表示</title>
</head>
</html>
</code></pre>