シンタックスハイライター「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プラグイン

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

ライブラリ

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

prismとは?

http://prismjs.com/

Prism

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

メリット

  • 動作が軽い
  • 行番号つけられる
  • 指定した行にマークアップできる
  • 言語名やタイトルを表示できる
  • CSS でデザイン変えられる
  • <pre><code> 対応

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が設定しているある場合、適用スタイルが競合しデザインが崩れてしまいます。該当タグをコメントアウトもしくは削除します。

ファイルの場所
外観 > テーマ編集 > style.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の導入手順

  1. prismのWebサイト上で「Compression level」、言語、プラグインを選択し、「JavaScriptファイル」と「CSSファイル」をダウンロード
  2. 2のファイルをサーバーにアップロードする
  3. WordPress のfunctions.phpにJavaScriptファイルとCSSファイルを読み込ませるための記述をする
  4. 記事にシンタックスハイライト表示させたい部分にprismのタグを設定する
prismの導入方法の流れ

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

 

WordPressサイトで設定するファイル構成例
public_html
├ドメイン
 ├wordpress
  ├wp-content
   ├themes
    ├親テーマ
    ├子テーマ
     ├functions.php:読み込み用コードを記入
     ├prism.css:Prismのサイトから設定ファイル取得
     ├prism.js:Prismのサイトから設定ファイル取得

 

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

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

prism

prism

1.「Compression level」の選択

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

  • Development version:完全版
  • 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」をクリックすれば、すべてをまとめて選択できますが、必要な言語のみに留めた方がよいでしょう。

  • Markup
  • CSS
  • C-like
  • JavaScript
  • Apache
  • CSS Extras
  • Git
  • Java
  • JSON
  • Python
  • Ruby
  • SQL
  • vim
言語選択

言語選択

4.プラグインの選択

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

  • Line Highlight:指定した行をマークアップ
  • Line Numbers:行番号の表示
  • Show Language:言語名の表示
  • Command Line :コマンド画面を表現できます。
  • Copy to Clipboard Button:ボタンクリックで内容をコピーできます。
  • Unescaped Markup:エスケープせずにマークアップ
プラグイン選択

プラグイン選択

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

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

  • JSファイル
  • CSSファイル

画面下の「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小テーマ内にアップロードします。

「小」テーマに適用

「小」テーマに適用

設置場所の例
/public_html/ドメイン/wordpress/wp-content/themes/小テーマフォルダ

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>
 コードを書く時に実体参照変換が必要

タグをそのまま記載すると、タグと認識され意図した通りに表示できません。「実体参照変換」が必要です。
jQuery、htmlやスクリプトのコードをpreタグで表示するためメタ文字をエスケープ

表示する言語名を表示

言語名を表示させたい場合、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>
書き方の例
<pre data-line=”1-2, 10″>:1行目の色を変える
<pre data-line=”1-2″>:1〜2行目の色を変える
<pre data-line=”1-2, 10″>:1〜2行目と10行目の色を変える

書き方の例

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>
  • data-user(コマンド実行ユーザ、rootを指定すると出力行が#に変わる)
  • data-host(コマンド実行マシン、root@localhostと表示表示)
  • data-output(コマンド実行結果行、半角数字で指定)

 言語の指定方法

  • 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の設定例

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

  • ボタンのラベル:prismjs
  • ダッシュアイコン ラベル名:prismjs
  • 開始タグ* :<pre><code class=”language-bash” data-language=”bash”>
  • 終了タグ(s) :</code></pre>

AddQuicktagを使ったタグ挿入方法

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

記入例

記入例

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

記入例

記入例

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

記入例

記入例

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

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

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

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

prismを再ダウンロード

prismを再ダウンロード

まとめ

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です