WordPressでPrism.jsを使う方法

導入～確認までの流れ

1. Prism.jsをダウンロード
2. ダウンロードしたライブラリをWordPressに配置
3. 配置したライブラリにリンクするコードを追加

1.Prism.jsのダウンロード

選択した対応言語と機能によりJavaScriptコードが生成されるので、公式サイトのダウンロードページで、シンタックスハイライトさせたい言語と使いたい機能の選択をします。

選択後はDOWNLOAD JSボタンとDOWNLOAD CSSボタンでprism.jsとprism.cssをダウンロードします。

2.ダウンロードしたライブラリをWordPressに配置

ダウンロードしたprism.jsとprism.cssを、有効化しているテーマのjs、cssディレクトリへ配置します。以下の例は、 有効化しているテーマがcocoon-child-masterの場合です。

• prism.js : ~/wp-content/themes/cocoon-child-master/js/prism.js
• prism.css : ~/wp-content/themes/cocoon-child-master/css/prism.css

3.配置したライブラリにリンクするコードを追加

有効化しているテーマのfunctions.phpにライブラリをリンクするコードを追加します。

• functions.php : ~/wp-content/themes/cocoon-child-master/functions.php

function my_enqueue_scripts() {
  // Prism.jsのスタイルシートとJSの呼び出し
  wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/css/prism.css' );
  wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/js/prism.js', array('jquery'), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

4.利用例

シンタックスハイライトしたいコードを、pre、codeタグで括り、codeタグのクラスに言語を指定します。以下はWordPressの「カスタム HTML」 ブロック にJavaソースを記載し、サイトに表示する場合の例です。

カスタムHTMLに記載する内容

<pre class="line-numbers"><code class="language-java">package import java.io.BufferedWriter;
import java.io.FileWriter;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Timestamp;
import java.text.SimpleDateFormat;

public class LogFileWriteSample {

  public static void main(String[] args) {
    // 日付フォーマット
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss.SSS");

    // FileWriterクラスのオブジェクトを生成する
    FileWriter file = null;
    try {
      file = new FileWriter("C:\\temp\\Sample.log", true);
    } catch (IOException e2) {
      e2.printStackTrace();
    }
    // PrintWriterクラスのオブジェクトを生成する
    PrintWriter logFile = new PrintWriter(new BufferedWriter(file));

    Timestamp timestamp = new Timestamp(System.currentTimeMillis());
    logFile.println(sdf.format(timestamp) + " LogFileWriteSample.");

    //ファイルを閉じる
    logFile.close();
  }
}
</code></pre>

サイト上での表示結果

package sample;
import java.io.BufferedWriter;
import java.io.FileWriter;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Timestamp;
import java.text.SimpleDateFormat;

public class LogFileWriteSample {

  public static void main(String[] args) {
    // 日付フォーマット
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss.SSS");

    // FileWriterクラスのオブジェクトを生成する
    FileWriter file = null;
    try {
      file = new FileWriter("C:\\temp\\Sample.log", true);
    } catch (IOException e2) {
      e2.printStackTrace();
    }
    // PrintWriterクラスのオブジェクトを生成する
    PrintWriter logFile = new PrintWriter(new BufferedWriter(file));

    Timestamp timestamp = new Timestamp(System.currentTimeMillis());
    logFile.println(sdf.format(timestamp) + " LogFileWriteSample.");

    //ファイルを閉じる
    logFile.close();
  }
}