WordPress設定

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

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設定の流れ

  1. prismサイトにアクセスします
  2. テーマとプログラミング言語、プラグインを選択してPrism.jsとprism.cssファイルをダウンロードします
  3. レンタルサーバーの任意のディレクトリに➁でダウンロードしたファイルをアップロード
  4. 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(ツリー表示)ファイルシステムのツリー構造を表示

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

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

JSとCSSをダウンロード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>

<pre>タグに機能を追加

<pre>タグに下記を追記すると機能を追加できます。

  • ラベルを表示:<pre data-label=”ラベル名”>
  • 行数を表示:<pre class=”line-numbers”>
  • 指定した行をハイライト(4行目と7~10行目):<pre data-line=”4, 7-10″>

HTMLのタグはエスケープ文字に変換する

HTMLタグの <> はWordPressによってHTMLとして認識されるのでそのままでは表示できません。なので <&lt; に、 >&gt; に変換(エスケープ処理)して入力する必要があります。

エスケープ処理とはプログラムの中で使う特殊な記号をただの文字として認識させるための処理です

表示を確認

prism.jsで表示させたHTMLコードprism.jsで表示させたHTMLコード

↑prism.js のテーマ「Default」を利用するとこのように表示することができます。

テーマ毎のデザインの違い

prism.jsで選択できるデザインや視認性が異なるテーマ全8種類を載せたので参考にしてください。

Default

PRISMのテーマ:「Default」PRISMのテーマ:「Default」

Dark

PRISMのテーマ:「Dark」PRISMのテーマ:「Dark」

Funky

PRISMのテーマ:「Funky」PRISMのテーマ:「Funky」

Okaidia

PRISMのテーマ:「Okaidia」PRISMのテーマ:「Okaidia」

Twilight

PRISMのテーマ:「Twilight」PRISMのテーマ:「Twilight」

Coy

PRISMのテーマ:「Coy」PRISMのテーマ:「Coy」

Solarized Light

PRISMのテーマ:「Solarized Light」PRISMのテーマ:「Solarized Light」

Tomorrow Night

PRISMのテーマ:「Tomorrow Night」PRISMのテーマ:「Tomorrow Night」

まとめ

prism.jsを使うとHTMLやCSSのコード、PHPなどのプログラム言語のコードを記事に貼り付けて解説するときに、背景色とテキストを視認性の良い色で表示することができます。

prism.jsを導入するメリットはファイルを直接テーマファイル内に設置しているので、余計な情報がなく、読み込みが早くて動作が軽い点です。

デメリットはWordPressのテーマファイルにコードを追記したり、ダウンロードしたJavaScriptとCSSファイルをレンタルサーバーのディレクトリに設置しないといけないため敷居が高いことです。

なので表示速度の低下を気にしない場合や、とにかく気楽で簡単に導入したい場合はシンタックスハイライターと呼ばれるコードを見やすく表示するプラグインの導入をおすすめします。

とにかくデザインや視認性重視で、シンプルな白黒のデザインを使いたい場合は「Urvanov Syntax Highlighter」が最もおすすめです。

多機能で細かくカスタマイズしたい場合は「Enlighter – Customizable Syntax Highlighter」プラグインをおすすめします↓