Prism.jsの使い方【豊富な画像で分かりやすく解説】

2022/12/232024/07/10

当ページのリンクには広告が含まれています。

悩む人

プラグインを使わずにソースコードをシンタックスハイライト表示させるのに「Prism.js」の導入を考えてるんだけど使い方が分からない。

こういった悩みにお答えします。

本記事で解決できること

Prism.jsの導入方法
シンタックスハイライト表示させるためのコードの書き方
雛形の再利用ブロックを作成し、それを活用する方法およびその際の注意点

是非、最後までご覧ください。

本記事の内容

Prism.jsの使い方を解説する前に完成版を紹介します。

こちらは「Okaidia」というテーマを使ってソースコードをシンタックスハイライト表示させています。

テーマは全部で8種類あり後ほど紹介します。

Prism.jsの使い方を解説する前にまずは使えるようにしていきます。

Prism.jsの公式サイトにアクセスします。

こちらのサイトからPrism.jsを使ってソースコードをシンタックスハイライト表示させるために必要となる「prism.css」と「prism.js」をダウンロードします。

「DOWNLOAD」をクリックします。

「Compression level:」を選択します。

Development version：開発版
Minified version：軽量版　※こちらを選択します。

「Themes」を選択します。

下記をテーマを選ぶ際の参考とし置いておきますので必要な方はご活用ください。

「Languages」を選択します。

シンタックスハイライト表示させたい言語を選択します。　※赤枠は僕が選択している言語になります。

「Plugins」を選択します。

「プラグインを選択します。」と言われても英語表記だし、プラグインの役割が分からなければ選択することが難しいと思いますので、下記に参考記事を2つ貼っておきます。

下記が僕が選択しているプラグインです。

僕が選択したプラグインの役割です。

Line Highlight：「指定した行」を目立たせる。
Line Numbers：「行数」を表示させる。
Show Language：「言語名」を表示させる。
Remove initial line feed：「コードブロック内の始めに改行」があれば削除する。
Toolbar：「Show Language」や「Copy to Clipboard Button」を選択すると自動的に選択される。
Copy to Clipboard Button：「コピーボタン」を設置できる。

「prism.css」と「prism.js」をダウンロードします。

子テーマの中に「prism.css」と「prism.js」をアップロードします。

※エックスサーバーのファイルマネージャを使っていますが、FTPソフトでも同じことができますので、参考記事を貼っておきます。

エックスサーバーの公式サイトにアクセスします。

トップページから、「ログイン」＞「ファイルマネージャ」を選択します。

「FTP情報」を入力して「ログイン」します。

「FTP情報」が記載されている場所を紹介します。

レンタルサーバー（Xserver）を契約した時に下記（赤枠）のメールが届いたかと思います。

その中（下記画像）に「FTPユーザー名（FTPアカウント名）」と「FTPパスワード」が記載されています。

ファイルマネージャにログインしました。

ここから、先ほどダウンロードした「prism.css」と「prism.js」をアップロードするフォルダまで移動します。

出発：hrdyuic.com　※サイトドメインになります。
ゴール：swell_child　※テーマフォルダ（子テーマ）になります。
道順：「hrdyuic.com」＞「public_html」＞「wp-content」＞「themes」＞「swell_child」

ゴールのswell_child（子テーマ）に到達しました。

この中に、「prism.css」と「prism.js」をアップロードするための「フォルダ」を作っていきます。

僕は「prism」というフォルダを作り、その中に「prism.css」と「prism.js」をアップロードしていますが、フォルダ名に指定は、フォルダを作らず直に「prism.css」と「prism.js」をアップロードしてもOKです。

新規作成したフォルダに「prism.css」と「prism.js」をアップロードします。

続いて子テーマのfunctions.phpにコードを書いていきます。

子テーマのfunctions.phpファイルにコードを書きます。

管理画面メニューから、「外観」＞「テーマファイルエディター」を選択します。

下記画面が表示されるので「理解しました」を選択します。

※テーマファイルエディターを開いたことがある方は表示されません。

「注意」が消えてテーマファイルを編集できるようになりました。

子テーマのfunctions.phpにコードを書きます。

手順①：編集するテーマを選択：テーマファイルエディターを開いた段階から現在使用中の子テーマが選択されています。
手順②：テーマファイル：テーマのための関数（functions.php）を選択します。
手順③：コードを書きます。　※書くと言ってもコピペです。

下記コードをコピペ用として置いておきますので必要な方はお使い下さい。


function highlighting_code() {
    wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/prism/prism.css',array() ,'' ,'all');
    wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/prism/prism.js',array() ,'' ,true);
   }
add_action('wp_enqueue_scripts', 'highlighting_code');

【注意点】
その①：テーマフォルダ（子テーマ）内にフォルダは作っているがフォルダ名が○○の場合
・wp_enqueue_style( ‘prism-style’, get_stylesheet_directory_uri() . ‘/○○/prism.css’,array() ,” ,’all’);
・wp_enqueue_script( ‘prism-script’, get_stylesheet_directory_uri() . ‘/○○/prism.js’,array() ,” ,true);
※上記の○○の部分を自分が決めたフォルダ名にします。

その②：テーマフォルダ内にフォルダを作っていない場合
・wp_enqueue_style( ‘prism-style’, get_stylesheet_directory_uri() . ‘/prism/prism.css’,array() ,” ,’all’);
・wp_enqueue_script( ‘prism-script’, get_stylesheet_directory_uri() . ‘/prism/prism.js’,array() ,” ,true);
※/prismは省略します。

これでPrism.jsの導入が完了です。

【本題】Prism.jsの使い方を解説します。

管理画面メニューから、「投稿」＞「新規追加」を選択します。

「ブロック挿入ツールを切り替え」をクリックします。

「ブロック挿入ツールを切り替え」の一覧が表示されます。

「ブロック」＞「ウィジェット」＞「カスタムHTML」を選択します。

「HTMLを入力…」にコードを入力します。

下記コードをコピペ用として置いておきますので必要な方はお使い下さい。

<pre class="line-numbers" data-line="○○"><code class="lang-○○">
</code></pre>

このコードを呼び出せるようにしておきます。

「オプション」＞「再利用ブロックを作成」を選択します。

「名前」を入力します。

名前を入力後、「保存」をクリックします。

これでコードを呼び出せるようになりました。

再利用ブロックの使い方については後ほど解説します。

それではソースコードをシンタックスハイライト表示させていきます。

再利用ブロックを通常ブロックへと戻します。

「オプション」＞「通常のブロックへ変換」を選択します。

　※通常ブロックへ戻す理由も再利用ブロックの使い方を解説する時に分かります。

コードを編集します。

<pre class="line-numbers" data="○○">　→　<pre>へ変更
<code class="lang-○○">　→　<code class="lang-html">へ変更

シンタックスハイライト表示させたいコードを用意します。

下記のコードをコピーします。


<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>

</html>

今回はコードを用意していますが、通常はテキストエディター（下記画像）からコードを用意します。