プログラミング

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

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

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

 

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

  1. Crayon Syntax Highlighter
  2. Highlighting Code Block

 

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

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

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

 

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

 

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

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

 

動作環境

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

 

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

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

 

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

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

 

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

 

1. Prismのダウンロード

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

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

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

>> Download ▲ Prism

 

step
2
Prismの設定

 

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

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

 

・Compression level:

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

 

・Themes

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

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

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

 

Prims-テーマによる見た目の違いの確認方法

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

 

Prism-テーマ-Default

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

 

・Language

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

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

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

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

 

・Plugins

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

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

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

 

step
3
Prismのダウンロード

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

 

Prismのダウンロード

 

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

 

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

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

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

Prismの設定はURLから復元できる

 

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

 

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

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

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

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

 

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

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

>> Xserverログインページへ

 

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

Prismをサーバーへアップロード|Xserverの例|Xserverファイル管理画面を開く

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

 

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

Prismをサーバーへアップロード|Xserverの例|アップロード先を表示する

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

 

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

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

 

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

Prismをサーバーへアップロード|Xserverの例|アップロード先にフォルダを作成する

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

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

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

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

 

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

Prismをサーバーへアップロード|Xserverの例|Prismをアップロード

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

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

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

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

 

Prismをサーバーへアップロード|Xserverの例|Prismのアップロード完了

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

 

3. WordPressでPrismの有効化

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

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

 

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

WordPressでPrismの有効化 | テーマエディタ画面の表示

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

 

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

WordPressでPrismの有効化 | 編集するテーマの選択

 

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

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

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

 

step
3
function.phpの表示

 

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

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

 

step
4
function.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です。

 

WordPressでPrismの有効化 | function.phpの編集

 

コードの補足

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

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

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

 

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

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

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

 

step
5
function.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の開始タグと終了タグを登録しておく

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

Prismの関連コードがワンクリックで呼び出せるようになる

-プログラミング