WordPressでソースコードをキレイに埋め込む方法【Prismのインストール手順】

WordPressでソースコードを埋め込む方法はプラグインを使うことが多いです。

ソースコード埋め込みの有名どころプラグイン

Crayon Syntax Highlighter
Highlighting Code Block

ところが、利用しているテーマやプラグインによっては相性が悪く、上手く表示されないことがあります。

また、プラグインは数が増えると結構重くなってくるので、表示速度の面でもイマイチ。

当ブログではAFFINGER５を使っているのですが、残念ながら相性が悪い組み合わせの１つのようで、上手く使えませんでした…。

大人しくQiitaに投稿したら？

いやだ！せっかくWordPreeで自分のブログを立ち上げたんだから、WordPressを使いたい！

ドナ

という（僕と同じく）わがままなあなたに向けて送る記事です。

先に結論をお伝えすると、Prismを使います。

AFFINGER5の標準機能を使う場合

 groovy
android {
compileSdkVersion 30
compileOptions {
sourceCompatibility JavaVersion.VERSION_11
targetCompatibility JavaVersion.VERSION_11
}
}

Prism.jsを使う場合


android {
  compileSdkVersion 30

  compileOptions {
    sourceCompatibility JavaVersion.VERSION_11
    targetCompatibility JavaVersion.VERSION_11
  }
}

Prismを使うと上記のような感じにできます。

ドナ

実はPrismの存在は知っていたのですが、なんだか難しそうな感じがしたのと、面倒で避けていました。てへぺろ。ただ実施に設定してみたところ５分ぐらいでできて、かつサクサク動くので、やってよかったです。 ※むしろこの記事を書く時間の方がずっと長かったレベル…。

本記事ではPrismをWordPressで使えるようになるまでの手順を解説します。

図入りで説明してますので、エンジニアで自分が学んだことをWordPressでかっこよくアウトプットしたい！という方は最後までお付き合いください。ぜひ快適なWordPressでのソースコード作成ライフを手に入れてってね。

動作環境

サーバー: Xserver
PHP: 7.4.25
WordPress: Version 5.8.1
WordPressテーマ: AFFINGER 5 20210201

WordPressにPrismをインストールする手順

インストールに必要な作業は以下の３ステップです。

Prism.jsのインストール手順

Prismのダウンロード
Prismをサーバーへアップロード
WordPressでPrimsの有効化

図入で解説していますので、見ながら一緒に手を動かして貰えば５分ぐらいでできると思います。

1. Prismのダウンロード

step
1Prismの公式ページへアクセス

まずはPrismをダウンロードします。

以下のリンクからPrismのダウンロードページにアクセスします。

>> Download ▲ Prism

step
2Prismの設定

埋め込んだソースコードの見た目や扱う言語など、Prismの設定を行います。

チェックボックスがたくさんあるのでちょっと面食らいますが、１つずつ確認していけば大丈夫です。順に見ていきましょう。

・Compression level:

ダウンロードするファイルの圧縮レベル。自分で変更を加える予定がない場合は、Minified versionにチェック。

・Themes

WordPress上でコードを書いたときに表示されるデザインを選びます。

私は青色が好きなのでCoyを選日ました。

デザインイメージは、Prismトップページで、右側のTHEME: と表示されている箇所を選ぶと、Examplesにイメージが表示されるので、そこで確認することができます。

Prismのトップページにて、”THEME:”と表示されている右側の各ボタンを選択することで、ソースコードを埋め込んだ際にどんな表示になるかを確認することがきる

Prismのテーマ”Default”を選択した場合の見た目

・Language

WordPressで扱う予定の言語を選びます。

選択しすぎるとWordPress記事の表示時に遅くなってしまうため、なるべく必要最低限に絞るのがベスト。

Prismは有効化を一度設定してしまえば、後でPrism設定を選び直し＆サーバーへアップロードし直せばすぐに反映することができます。

ですので、まずは現時点で扱おうと考えているものだけ選びましょう。

・Plugins

表示時に使える便利な拡張機能です。

以下あたりはおすすめです。

Line Highlight: 選択行のハイライト
Line Numbers: 行番号の表示
Show Language: 言語の表示
Copy to Clipboard Button: コピーボタンの表示

step
3Prismのダウンロード

選択が終わったら、画面下のDOWNLOAD JSとDOWNLOAD CSS、両方のボタンを押下します。

1)prism.js, 2)prism.cssという２つのファイルがダウンロードできていればOKです。

補足: Prismの設定はURLで復元できる

選択が終わった後にブラウザのURL欄を見ると、これまで選択したものがURLのパラメータとして設定されていることが分かります。

このURLをメモして覚えておくことで、「今どんな設定だったかな？追加で他の設定も足したい」というときにURLを入力することで、以前設定した状態を復元することができます。

ちなみに私はこちらのリンクの通りに設定しています。

2. サーバーへアップロード

先ほどダウンロードしたPrismのファイルをサーバーへアップロードします。

アップロードには、FTPソフトを利用するか、レンタルサーバーであれば各ベンダーが用意しているブラウザのアップロード機能などを利用します。

ドナ

私はXserverを使ってブログを運営しているので、Xserverの場合を例に図入りで解説していきますね。

step
1Xserver管理ページへログイン

まずはXserver管理ページへログインします。

>> Xserverログインページへ

step
2Xserverファイル管理画面を開く

「ファイル管理」を選択して管理画面を開きます。

step
3アップロード先を表示する

ツリーフォルダをクリックしながら、ブログのドメイン名 > public_html > wp-content > themes > “テーマ”を開きます。

例えば私のブログだと、ドメイン名はdonachikiblog.com、テーマはaffinger5-childなので、以下になります。

donachikiblog.com > public_html > wp-content > themes > affinger5-child

step
4Prismアップロード先のフォルダを作成

prismファイルをアップロードするため、分かりやすくprismフォルダを作成します。

左上の”新規フォルダ”を押下します。

新規フォルダ作成のダイアログが表示されるので、名前を入力してくださいの欄にprismと入力し、作成を押下します。他はデフォルトのままでOKです。

※正確にはフォルダ名はどんな名前でも大丈夫です。ただ同じ名前で作成すると、この後function.phpというファイルを編集する際に同じコードをコピーするだけですむので、心配な方は同じに併せてもらうと良いです。

step
5prism.css, prism.jsをアップロード

先ほどダウンロードしたprism.css, prism.jsを、step4で生成したフォルダにアップロードします。

左側のツリーでprismフォルダを選択し、画面中央上のアップロードを押下します。

アップロード画面が表示されるので、prism.css, prism.jsの２つのファイルをドラッグ＆ドロップします。

対象のファイルが正しく選択できていることを確認したら、アップロードボタンを押します。

prismフォルダに、prism.css, prism.jsの２つのファイルが表示されていれば完了です。

3. WordPressでPrismの有効化

最後に、アップロードしたprismをWordPressで使えるように機能の有効化をおこないます。

具体的にはfuntion.phpというファイルを編集します。

step
1テーマエディタ画面の表示

WordPress管理画面にアクセスし、左側メニューバーから外観 > テーマエディタを選択します

step
2編集するテーマの選択

右側の編集するテーマを選択のプルダウンから編集するテーマを選び、選択ボタンを押下します。

テーマによっては親テーマと子テーマがあるので、子テーマを選びます。

私はAFFINGER5を使っていますが、AFFINGER5の場合はWING-AFFINGER5 Childの方を選んでください。

step
3function.phpの表示

テーマのための関数(function.php)を選びます。

※ここはテーマによって表示される文言が違うようですが、funtion.phpと書かれているものは見つかると思います。

step
4function.phpの編集

funtion.phpを編集します。

末尾に以下のコードをコピーして貼り付けます。


// prism.js の読み込み
function add_files_prism_js() {
	wp_enqueue_script( 'prism-style', get_stylesheet_directory_uri() . '/prism/prism.js', '', '', true );
}
add_action( 'wp_enqueue_scripts', 'add_files_prism_js' );

// prism.css の読み込み
function add_files_prism_css() {
 	wp_enqueue_style( 'prism-script', get_stylesheet_directory_uri() . '/prism/prism.css', '', '' );
}
add_action( 'wp_enqueue_scripts', 'add_files_prism_css' );

以下のようになればOKです。

コードの補足

Prismが配置されている場所を取得するために、テーマディレクトリのURLを取得する必要があります。

get_stylesheet_directory_uri関数は、子テーマが配置されているディレクトリを取得します。

親テーマに直接アップロードした場合は、get_template_directory_uri()を使ってください。

wp_enqueue_scriptとwp_enqueue_styleの３つ目の引数'/prism/prism.js’は、サーバーにアップロードしたprismのパスになります。

今回の説明では子テーマの直下にprismというフォルダを作成し、その下にprism.jsとprism.cssを配置したので、この引数になります。

異なる場所に配置した場合は、状況に合わせて修正が必要です。

step
5function.phpの更新

編集が終わったら、下側にあるファイルを更新を押下します。

ファイルの編集に成功しました。と表示されれば無事に完了です。

Prismを使ったソースコードの埋め込み方

WordPressでPrismを使ってソースコードを埋め込むには、ビジュアルエディタではなくテキストエディタを使います。

テキストエディタで、<pre>タグと<code>タグで囲い、その中にソースコードを書けばOKです。

<pre><code>ここにソースコードを書く</code></pre>

言語名の表示

PrismのPlugin選択時に、Show Languageを選んだ人は、言語名を表示することができます。

<code class=“language-xxx”>とすることで、言語に応じたハイライト表示を行うことができます。

<pre><code class="language-xxx">xxxには言語名を書く</code></pre>

xxxの部分が言語名で、Prismをダウンロードした際に扱う言語としてチェックを選んでいれば対応します。

xxxの部分の書き方はこちらの公式ページを見ながら当てはまるものを書きましょう。

行番号を表示する

PrismのPlugin選択時に、Line Numbersを選んだ人は、コードの横に行番号を表示することが可能です。

<pre class="line-numbers"><code>line-numbersを付けることで行番号が表示される</code></pre>

N行目をハイライト表示


<!-- 2行目をハイライト表示 -->
<pre data-line="2">

<!-- 1-5行目をハイライト表示 -->
<pre data-line="1-5">

Prismをさらに使いやすく

Prismを使えばソースコードがキレイに表示できるものの、毎回<pre><code>…と入力するのが面倒…。

なので、一式をテンプレートとして呼び出せるようにしましょう。

例えば、AddQuickTagプラグインを使ってPrismに必要なタグをあらかじめ設定しておけば、ワンクリックでコードが書けるようになります。

AddQuickTagプラグインを使ってPrismの開始タグと終了タグを登録しておくと...