シンタックスハイライター「prism.js」の使い方 | プラグイン無しでソースコードを綺麗に埋め込める

WordPressサイトで記事に、HTML・CSS・PHPなどプログラミングのコードを表示綺麗に埋め込みたい。いい方法はある？

「prism.js」がおすすめです。

WordPressのプラグインの「Crayon Syntax Highlighter」や「Crayon Syntax Highlighter to Pastacode」を使っているけれど、 なんだか、表示が重いな〜ということはありませんか。

そんな方にオススメするのが、「Prism.js」というJavaScript、cssの軽量シンタックスハイライターです。 これを使えば、WordPressに綺麗にソースコードを表示させることができます。

シンタックスハイライトとは？

シンタックスハイライトとはソースコードを色分けで表示することです。 Prismを導入すると、以下のような見た目のコードを表示できます。

シンタックスハイライターの種類

シンタックスハイライトで表示させる方法は複数あります。 主には、Wordpressプラグインを使う方法とライブラリを使う方法です。

WordPressプラグイン

• WP Code Highlight.js
• Crayon Syntax Highlighter
• Crayon Syntax Highlighter to Pastacode

シンタックスハイライト表示にすでにプラグインを使っている方も多いと思います。 プラグインの場合、若干表示が遅い傾向があります。

ライブラリ

• Prism

今回は、読み込みが早くが動作が軽量なPrismを使った方法を紹介します。

prismとは？

Prism

prism.jsとはJavaScriptとCSSがセットになったライブラリ。利用料金は無料です。 ライブラリとは簡単コードで必要な機能を呼び出せるようにしたものです。 prismは以下の特徴があります。

prismの使い方

prismの設定が完了すれば、以下のように書くことで、シンタックスハイライト表示できます。 詳しく使い方はあとで説明します。

<pre>
<code class="language-php">
 ここにコードを書く
 </code></pre>

prismの導入前の準備

prismの導入前に次の2つを事前します。

• WordPressテーマを「子テーマ」化しておく
• WordPressテーマ「code」「pre」タグのコメントアウト or 削除

WordPressテーマを「子テーマ」化しておく

WordPressテーマを「子テーマ」化し、WordPressテーマが更新されたときも影響を受けないようにします。

WordPressテンレートの「code」「pre」タグのコメントアウト or 削除

使っているWordPressテーマの「code」「pre」タグに独自のCSSが設定しているある場合、適用スタイルが競合しデザインが崩れてしまいます。該当タグをコメントアウトもしくは削除します。

/*-------
pre {
margin: 0; }

code,pre{
font-family: monospace, serif;
font-size: 0.9em;
color: #f9f9f9;
padding: 0.05em 0.4em;
border-radius: 3px;
background: initial;
color: #444;
}
--------*/

prismの導入方法

prismの導入は大まかには次の流れで行います。

prismの導入方法の流れのイメージ図

Step1:prism公式サイトで「圧縮レベル」「言語」「プラグイン」を指定し、ダウンロード

まず、公式サイトでにアクセスし、「DOWNLOAD」ボタンをクリックします。 なお、事前にテーマ（デザイン）を確認したい場合は、トップページ右の方で「DEFALUT」、「DARK」をクリックしてチェックできます。

prism

1.「Compression level」の選択

「Compression level」は２つの選択肢があります。 通常、「Minified version」を選びます。

テーマを選ぶ

次にシンタックスハイライト表示に見た目を変えるため、適用するテーマを選びます。prismで用意されているテーマは7種類です。

テーマを選ぶ

Test driveでテーマを確認
Test driveから開くと自分で入力したコードで各Language のハイライト表示を比較しながら確認できます。どのようにシンタックスハイライト表示されるのか、参考例として、Themes（テーマ）の一覧を紹介します。 好みのデザインのテーマを選びましょう。
 

Default

Dark 2KB

Funky

Okaidia

Twilight

Coy

Solarized Light

Coy

3.言語を選ぶ

「languages（言語）」ではシンタックスハイライト表示させる言語を選択します。  「Select/unselect all」をクリックすれば、すべてをまとめて選択できますが、必要な言語のみに留めた方がよいでしょう。

言語選択

4.プラグインの選択

プラグインを選択します。これもお好みですが、よくつかそうなプラグインを紹介しておきます。

プラグイン選択

5.ファイルダウンロード

「Compression level」「言語」「プラグイン」の選択が完了したら、 ２つのファイルをダウンロードします。

画面下の「DOWNLOAD JS」と「DOWNLOAD CSS」ボタンをそれぞれクリックします。 すると、ローカルパソコンに「prism.css」と「prism.js」ファイルがダウンロードされました。

Step2:WordPressの設置サーバーにファイル（Prism.jsとPrism.css） アップロード

続いて、「Prism.js」と「Prism.css」をWordPressに読み込ませる設定を行っていきます。

読み込ませる方法は色々とあるのですが、「子テーマ」にアップする方法を紹介します。 WordPressをカスタマイズするときは、「子テーマ」に適用することを推奨します。 「子テーマ」について詳しくは「WordPressテーマのカスタマイズが消える！？ カスタム前には「子」テーマを使う」 を参照してください。

WordPressの「小」テーマディレクリにアップロード

「prism.js」と「prism.css」を、サーバーのWordpress小テーマ内にアップロードします。

「小」テーマに適用

Step3:小テーマのfunctions.phpに書き込み

// prism.jsとprism.cssを読み込み
function prism_js() {
    wp_enqueue_style( 'prism', get_bloginfo( 'stylesheet_directory') . '/prism.css', array(), null, 'all');
    wp_enqueue_script( 'prism', get_bloginfo( 'stylesheet_directory') . '/prism.js', array(), false, false );
}

// prism.jsとprism.cssを呼出
add_action( 'wp_enqueue_scripts', 'prism_js' );
　

コードを記入後、更新して保存します。 これでPrism.jsの事前設定は完了です。

Prism.jsの基本的な書き方

それでは、シンタックスハイライト表示させるための使い方をみていきましょう。 Prism.jsの記述方法について説明します。

シンタックスハイライト表示させたい部分を<pre><code>タグで囲む

シンタックスハイライト表示させたい部分を<pre><code>タグで囲みます。 <code>タグのclassに”language-言語”と指定します。

<pre>
<code class="language-markup">
ここにソースコードを書く
</code>

表示する言語名を表示

言語名を表示させたい場合、preタグに「data-language=”言語名”」クラスを指定します。「””」の中に記載した文字列がコードの右上にそのまま表示されます。

<pre>
<code class="language-markup" data-language="言語名">
ここにソースコードを書く
</code>

行番号を設定

行番号を表示させたい場合、preタグに「line-numbers」クラスを指定します。

<pre class="line-numbers">
<code class="language-言語名">
ここに表示させたいソースコードを書く
</code>
</pre>

特定行の色を変えるハイライト

特定行をハイライト表示した場合はpriタグに行番号を「data-line」クラス指定します。カンマ区切りで複数指定できます。 ハイフンで複数行の指定ができます。

<pre class="line-numbers" data-line"色を変えたい行番号">
<code class="language-言語名">
ここに表示させたいソースコードを書く
</code>
</pre>

書き方の例

HTML

<pre>
<code class="language-markup" data-language="markup">
ここにソースコードを書く
</code>
</pre>
　

HTMLの場合は、言語部分は「HTML」では「markup」と書きます。他の言語の場合は、そのままの言語名を指定します。

CSS

<pre>
<code class="language-css" data-language="css">
ここにソースコードを書く
</code>
</pre>

PHP

<pre>
<code class="language-php" data-language="php">
ここにソースコードを書く
</code>
</pre>

JS

<pre>
<code class="language-javascript" data-language="javascript">
ここにソースコードを書く
</code>
</pre>

Python

<pre>
<code class="language-python" data-language="python">
ここにソースコードを書く
</code>
</pre>

コマンドライン表示

<pre class="command-line" data-user="user" data-host="localhost" data-output="2-18">
<code class="language-bash">
</code>
</pre>

 言語の指定方法

• arkup – markup
• CSS – css
• C-like – clike
• JavaScript – javascript
• ABAP – abap
• ActionScript – actionscript
• Ada – ada
• Apache Configuration – apacheconf
• APL – apl
• AppleScript – applescript
• AsciiDoc – asciidoc
• ASP.NET (C#) – aspnet
• AutoIt – autoit
• AutoHotkey – autohotkey
• Bash – bash
• BASIC – basic
• Batch – batch
• Bison – bison
• Brainfuck – brainfuck
• Bro – bro
• C – c
• C# – csharp
• C++ – cpp
• CoffeeScript – coffeescript
• Crystal – crystal
• CSS Extras – css-extras
• D – d
• Dart – dart
• Django/Jinja2 – django
• Diff – diff
• Docker – docker
• Eiffel – eiffel
• Elixir – elixir
• Erlang – erlang
• F# – fsharp
• Fortran – fortran
• Gherkin – gherkin
• Git – git
• GLSL – glsl
• Go – go
• GraphQL – graphql
• Groovy – groovy
• Haml – haml
• Handlebars – handlebars
• Haskell – haskell
• Haxe – haxe
• HTTP – http
• Icon – icon
• Inform 7 – inform7
• Ini – ini
• J – j
• Jade – jade
• Java – java
• Jolie – jolie
• JSON – json
• Julia – julia
• Keyman – keyman
• Kotlin – kotlin
• LaTeX – latex
• Less – less
• LiveScript – livescript
• LOLCODE – lolcode
• Lua – lua
• Makefile – makefile
• Markdown – markdown
• MATLAB – matlab
• MEL – mel
• Mizar – mizar
• Monkey – monkey
• NASM – nasm
• nginx – nginx
• Nim – nim
• Nix – nix
• NSIS – nsis
• Objective-C – objectivec
• OCaml – ocaml
• Oz – oz
• PARI/GP – parigp
• Parser – parser
• Pascal – pascal
• Perl – perl
• PHP – php
• PHP Extras – php-extras
• PowerShell – powershell
• Processing – processing
• Prolog – prolog
• .properties – properties
• Protocol Buffers – protobuf
• Puppet – puppet
• Pure – pure
• Python – python
• Q – q
• Qore – qore
• R – r
• React JSX – jsx
• Reason – reason
• reST (reStructuredText) – rest
• Rip – rip
• Roboconf – roboconf
• Ruby – ruby
• Rust – rust
• SAS – sas
• Sass (Sass) – sass
• Sass (Scss) – scss
• Scala – scala
• Scheme – scheme
• Smalltalk – smalltalk
• Smarty – smarty
• SQL – sql
• Stylus – stylus
• Swift – swift
• Tcl – tcl
• Textile – textile
• Twig – twig
• TypeScript – typescript
• VB.Net – vbnet
• Verilog – verilog
• VHDL – vhdl
• vim – vim
• Wiki markup – wiki
• Xojo (REALbasic) – xojo
• YAML – yaml

Prism.jsのタグを簡単に挿入するには？

Prism.jsのタグを手打ちでを入力するのは、面倒です。 WordPressプラグインAddQuicktagを使うとタグの挿入が便利になります。 AddQuicktagインストールします。 詳しい使い方は「Wordpressでタグを簡単に挿入AddQuicktag」を参考にしてください。

AddQuicktagの設定例

以下は、ターミナルのコマンドをシンタックスハイライト表示する場合の設定例です。

AddQuicktagを使ったタグ挿入方法

AddQuicktagを使ったタグ挿入方法を説明します。 投稿➔新規追加で投稿画面を開きます。 ビジュアルエディターを開きます。 例として 「$ pwd 」と入力します。

記入例

「$ pwd 」を範囲選択し、上部メニューの「Quicktas」から「prismjs」を選択します。 これで、prismjsのタグの挿入ができました。

記入例

テキストエディターを確認してみましょう。 「$ pwd 」の前後が<pre><code>タグで囲まれていることが確認できます。

記入例

記事の表示を確認してみます。 シンタックスハイライト表示できました。

prismを再ダウンロードするとき

テーマを変更したり、言語を追加したいときにprismで１から項目を選択していくのは手間です。 「prism.css」ファイルを開くと一番上の部分URLがあるのが確認できます。

このURLをブラウザに貼り付けて開くと、テーマ・言語・プラグインが選択された状態でprismのWEBサイトが開きます。 追加したい部分だけ選んでダウンロードし、サーバーにアップすればOKです。

prismを再ダウンロード

まとめ

WordPressでソースコードをシンタックスハイライト表示させるためのライブラリ、prism.jsの使い方を紹介しました。 WordPressプラグインAddQuicktagを合わせて使うとタグ挿入が便利です。