WordPressにPrism.jsを導入する

Prism.jsダウンロード

Prism.jsはテーマやプラグインの設定を選択して、ダウンロードするだけで使えるシンタックスハイライターです。

公式からjsとcssをダウンロードします。

Download ▲ Prism

prismjs.com

以下の４つを選択します。

テーマを選択すると、ページの一番下にプレビューが表示されます。

プラグインは最低限以下の２つは必要になると思います。

 Line Highlight 　指定行の背景をハイライト
 Line Numbers 　行数表示

WordPressの設定

ファイルアップロード

ダウンロードしたprism.js、prism.cssをWordpressで使用しているテーマの配下にアップロードしてください。ここではlibフォルダを作成し、アップロードしています。

functions.php

テーマ配下のfunctions.phpの最後に以下を追記してください。

function syntax_with_prism() {
	wp_enqueue_style( 'prism-style', get_stylesheet_directory_uri() . '/lib/prism.css' );
	wp_enqueue_script( 'prism-script', get_stylesheet_directory_uri() . '/lib/prism.js', null, '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'syntax_with_prism' );

使い方

投稿画面->三点リーダーでコードエディターを選択します。

preタグに以下のように設定できます。

<pre data-label="Dockerfile" data-line="1-5,10" class="language-docker line-numbers">

実際の表示は以下になります。

SyntaxHighlighter Evolvedとの共存

Prism.jsとは競合しないため、SyntaxHighlighter Evolvedと共存して使うことも可能です。