【prism.js】wordpressでコードを載せる時に使えるハイライト表示用js【色分けが出来る】

wordpressでコードを載せる時に色分けするものをシンタックスハイライターと言う
色々あるが機能が足りなかったり、容量が多くページ表示速度に影響があったりと、どれを使うべきか迷う
数あるシンタックスハイライターの中でも軽量で使いやすいものにprism.jsと言うものがある
prism.jsは導入から表示までが比較的簡単

シンタックスハイライターとは

wiki様によると

シンタックスハイライト (英: syntax highlighting, 構文強調) とは、テキストエディタの機能であり、テキスト中の一部分をその分類ごとに異なる色やフォントで表示するものである。シンタックスカラーリング (syntax coloring) とも。

シンタックスハイライト

こーゆーもの↓


このシンタックスハイライターを使えばブログなどでコーディング風の画面が表現出来る

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

シンタックスハイライターでは有名なものに

  • SyntaxHighlighterEvolted
  • Crayon Syntax highlighter

などがあるが機能が限られていたり、多機能なものは重い

軽量かつ多機能なものにprism.jsと言うものがある

prism.jsの使い方

prism.jsは導入から記述までが簡単

  1. 公式サイトで内容(カラーやプラグインなど)を選んでjsとcssを落とす
  2. 自分のサイトでjsとcssを読み込む
  3. 表示させたい箇所に記述

ダウンロード

prism.js公式サイト

上記公式サイトにて右上の【DOWNLOAD】をクリック

項目は5つだが、この内選択する項目は4つ(1つはcoreファイルなので必要)

  • Compression level(圧縮度)
  • Core(必要ファイル)
  • Themes(カラーテーマ)
  • Languages(使用言語、html、cssなど)
  • Plugins(+αのプラグイン、行番号表示など)

親切なことに各テーマからプラグインまでのファイルサイズが書かれていて、現在選択しているファイルサイズのTotalとjs,cssの内訳も分かる

使いたい内容が選べたら下部の「DOWNLOAD JS」と「DOWNLOAD CSS」をclick

Compression levelについて

圧縮度

  • Development version(非圧縮)
  • Minified version(圧縮)

とあるが、落としたファイルの中身を調べたり、直接イジらない限りは「Minified version」を選んだ方が軽くて良い

Themesについて

コード表示の際のカラー

  • DEFAULT

    デフォルトの設定。シンプル

  • DARK

    スクロールバーの外側に枠線が付く
    色合いがsublimeTxtに似てる気がする

  • FUNKY

    だいぶファンキー……見辛い気がする

  • OKAIDIA

    DARKよりも黒目
    こちらの方がsublimeっぽい？

  • TWILIGHT

    これも黒系。タグはオレンジ。
    プロパティと値が同色の緑

  • COY

    左側に太めの青線が入る
    あとこれだけボックスの下側に影が付く。この影はcssの疑似要素(before,after)で付いている

  • SOLARIZED LIGHT

    背景が薄い黄色
    全体的に色の差が少なく、微妙に見辛い気がする

  • TOMORROW NIGHT

    TWILIGHTに似ているがこちらの方がより黒い

の全8種類
このサイトではcssを上書きする形でカスタムするので、一番軽い「Tomorrow Night(1.71KB)」を使用

Languagesについて

このサイトで使用しているものは

  • Markup(htmlのこと)
  • CSS
  • C-like(JavaScriptを選ぶと同時に選ばれる)
  • JavaScript
  • markdown
  • Markup templating(PHPを選ぶと同時に選ばれる)
  • JSON + JSONP
  • PHP
  • Ruby
  • Python
  • scss
  • pug

Pluginsについて

理解出来た物は説明付き(グーグル翻訳様使用)
半分くらい分かりませんでした……
このサイトで使用しているものには付き

Line Highlight 指定行をハイライト
Line Numbers 行番号を付ける
Show Invisibles タブや改行など不可視の文字を可視化する
Autolinker コード内のURLやメールアドレスなどをクリック出来るリンクに変換する
コメント内のテキストを特定のURLにリンクしたい場合はマークダウン構文を使用する
WebPlatform Docs WebPlatform.orgのドキュメントにトークンをリンクさせる
ちょっと何言ってるか分かりません……トークンてなんぞや？
使用の際は特別なセットアップは必要ない。ダウンロードするだけでOK
Custom Class prism.jsに使用するクラス名に接頭辞(「.comment」は「.namespace–comment」など)を付けることが出来る？
prism.jsに使われているクラス名は一般的な名前が多いので他の用途で使用しているクラス名と被らないようにする為のプラグイン？
よく分かりませんでした
File Highlight 外部ファイルを取得して、prism.jsでハイライト表示する
空の<pre></pre>要素に「data-src」属性でファイルを指定する
例：<pre data-src=”myfile.js”></pre>
注意点は「ファイルはXMLHttpRequestで取得される」ので他のサイトから持ってくる場合、そのサイトで*1CORSが有効にされていないと持ってこれない
このプラグインは「ツールバープラグイン」との組み合わせることで、表示したコードにダウンロードボタンを付けることが出来る
*1CORSとは：Cross-Origin Resource Sharingの略。読み込み元のページがあるサーバーから別のサーバーにあるファイルを読み込む仕組みのこと。つまり他所様のサイトから持ってくることは出来ないと言うこと
Show Language 現在表示しているコードが何の言語かを示すことが出来る
文字列で指定出来るのでhtml,css,javascriptなどだけでなく、基本的に何でも表示出来る
JSONP Highlight JSONPでコンテンツを取得してハイライト表示する(GitHub、GitHub Gists、Bitbucketなど)
詳しいことは分かりませんでした
Highlight Keywords コード内で自分で決めたキーワードにクラス名を自動で付与する
これにより特定のキーワードをcssで装飾が出来る
Remove initial line feed※廃止予定 コードの最初の改行を削除する
このプラグインは廃止される予定なので、変わりに「Normalize Whitespace」プラグインを使う
Previewers コード内の値をホバーするとプレビューが表示される
例えば、「#f00」と記述された箇所をホバーすると赤色が表示される
サポートされている値は
  • angle 角度
  • color 色
  • gradient グラデーション
  • easing イージング、アニメーションの緩急
  • time 時間
    • サイトでExamplesを試してみると分かり易い
    Autoloader コードをハイライトするのに必要な言語を自動的に読み込む
    不完全な文法を自動的に処理して埋めてくれる？
    使用の際は追加で「文法ファイル」を落とす必要がある。ちょっと重い
    よく分かりませんでした
    Keep markup コード内の指定箇所を強調表示する。
    指定した単語が四角で囲まれる
    サイトでExamplesを見ると分かり易い
    Command Line windowsのコマンドプロンプトやMacのターミナル風な表示が出来る
    インラインコードではなくコードブロックで使用出来る
    Unescaped markup 「>」などをそのまま表示出来る。
    このプラグインを使わないと「>」などは文字実態参照(「&gt;」など)で記述する必要がある
    使用方法は2通り
    <pre><code>の代わりに<script type=”text/plain”>を使う
    <pre><code>の中を<!—->で記述する
    Normalize Whitespace 空白に対する処理を指定出来る
    • 行の先頭や末尾の空白、タブなどを削除
    • タブをスペースへ、スペースをタブへ変換
    • インデントの指定
    • 長い行を特定の文字数で改行
    など色々出来る
    Data-URI Highlight URIを自動でハイライトする
    MIMEタイプ情報にて文法が推測される
    Toolbar コードの右上にツールバーを付けてボタンを表示できる
    ボタンは自分で登録出来る(コードを選択ボタンなど)
    jsにて機能を制作する
    Copy to Clipboard コードをコピーボタンを追加する
    プラグインを落とす他、Clipboard.jsをプラグインより前に読み込む必要がある

    読み込み

    普通のファイルと同じように<head></head>内に「prism.js」と「prism.css」を読み込ませるだけ

    簡単！

    ちなみに

    一度落としたファイルをもう一度落とす場合(言語やプラグインを追加したい時)
    すでに自分が持っているプラグインなどの内容を忘れてしまっても、jsかcssファイルの冒頭に書かれているurlへ飛ぶと、その項目が選択されている状態でページが表示されるので便利
    本当に親切

    記述方法

    基本的な記述方法とプラグインの使い方について

    基本的な使い方

    コード表示したい箇所を <pre><code class=”language-テキスト(言語名)”>
    ここにコード
    </code></pre>     で囲む

    例えばhtmlのコードを載せる時は <pre><code class=”language-html”>
    &lt;span&gt;ここにコード&lt;/span&gt; </code></pre>     と書く

    これを表示させると

    <span>ここにコード</span>

    になる

    注意
    • タグはエスケープ処理(「<」を「&lt;」に、「>」を「&gt;」にする)が必要
    • 記述の際は行頭にあるタブなどのインデントが反映されてしまうのでソースの整形には気を付ける
    • <code>の後に改行を入れると表示した際に不要な行が冒頭に1行入ってしまう
      （プラグインのline Numbersを使用すると分かるが1行目に空の行が入っている）
      これはwordpressだから？

    インラインで表示したい場合は<pre></pre>を無くして<code class=”language-html”></code>で挟む

    <code class=”language-html”>&lt;span&gt;ここにコード&lt;/span&gt;</code> と書く

    これを表示させると<span>ここにコード</span>になる

    プラグインの使い方

    このサイトで使用しているもので、使い方の分かるものについて

    Line Highlight

    指定行をハイライトするプラグイン

    使用の際は<pre>にdata-line属性を付けて
    <pre data-line=”2″> などにする

    これを表示させると

    <span>ここにコード</span>
<span>ここにコード</span>
<span>ここにコード</span>

    と2行目がハイライトされる

    指定の仕方
    • 一行ずつ指定する場合は ,(カンマ)で区切る
    • 複数行をまとめて指定する場合は -(ハイフン)を使用する

    2、4～6、8行目をハイライトした場合は
    <pre data-line=”2,4-6,8″><code class=”language-html”><span>か
    <pre data-line=”2,8,4-6″><code class=”language-html”><span>
    と指定する(指定の順番は自由)

    これを表示させると

    <span>ここにコード</span>
<span>ここにコード</span>
<span>ここにコード</span>
<span>ここにコード</span>
<span>ここにコード</span>
<span>ここにコード</span>
<span>ここにコード</span>
<span>ここにコード</span>
<span>ここにコード</span>

    と2、4～6、8行目がハイライトされる

    また、行の開始番号の指定や、アンカーリンクの設定なども出来る模様

    Line Numbers

    行番号を付けるプラグイン

    使用の際は<pre>にクラスline-numbersを付けて
    <pre class=”line-numbers”> にする

    これを表示させると

    <span>ここにコード</span>
<span>ここにコード</span>
<span>ここにコード</span>

    と行番号が出る

    <pre>にdata-start属性を使用すると行の開始番号を指定出来る

    例：<pre class=”line-numbers” data-start=”3″>

    <span>ここにコード</span>
<span>ここにコード</span>
<span>ここにコード</span>

    指定した通り行の開始が3になった

    ちなみに開始番号はマイナスの値も指定出来る

    例：<pre class=”line-numbers” data-start=”-2″>

    <span>ここにコード</span>
<span>ここにコード</span>
<span>ここにコード</span>
<span>ここにコード</span>
<span>ここにコード</span>
    Show Language

    現在表示しているコードが何の言語かを示すことが出来るプラグイン
    文字列で指定するのでhtml,css,javascriptなどだけでなく好きな文字列を指定出来る
    指定した文字列はコードをホバーすると表示される

    例：「text」にしてみる<pre><code class=”language-text”>

    <span>ここにコード</span>

    普通に表示出来た

    例：数字にしてみる<pre><code class=”language-1234″>

    <span>ここにコード</span>

    これも普通に表示出来た

    例：半角スペースを入れてみる<pre><code class=”language-te xt”>

    <span>ここにコード</span>

    半角スペース以降が表示されない

    例：全角文字を指定<pre><code class=”language-てきすと”>

    <span>ここにコード</span>

    表示されない

    全角やスペースじゃなければ基本的に何でも表示出来る

    Command Line

    コマンドライン自体に詳しくないので説明が出来ませぬ……
    こちらの記事が分かり易く解説しているようです

    Unescaped markup

    タグのエスケープ処理を気にせずそのまま書けるプラグイン

    記述方法は2通りで

    <script type=”text/plain” class=”language-html”>
    <span>ここにコード</span>
    </script>     とscriptタグで囲むか

    <pre class=”language-html”><code><!–
    <span>ここにコード</span>
    –></code></pre>     とhtmlのコメント<!—->を<code></code>で囲む

    表示は

    scriptで囲んだ場合

    htmlのコメントで囲んだ場合

    と表示も記述したままの物が出る

    Toolbar

    コードの右上にツールバーを付けてボタンを表示できるプラグイン
    ボタンは自分で登録出来る(コードを選択ボタンなど)
    ボタンの機能はjsにて自分で設定する

    Copy to Clipboard

    「コードをコピーボタン」を追加するプラグイン
    記述の際にやることは特に無いが、このプラグインを落とす他、Clipboard.jsをプラグインより前に読み込む必要がある
    それも恐らくpackageにて自動的にロードされているので、特にやることは無い

    まとめ

    シンタックスハイライターを使用するとブログでコーディングっぽい見栄えに出来る。

    prism.jsはダウンロードから表示までがさほど難しくなく、カスタマイズなどもし易い上に軽量なので、導入し易い

    自分用テンプレ

    他の記事で使用する為の自分用テンプレ

    html

    <script type=”text/plain” class=”language-html”>
      <p>ここにコード</p>
    </script>

    css

    <script type=”text/plain” class=”language-css”>
      .class{
        display: block;
      }
    </script>

    js

    <script type=”text/plain” class=”language-js”>
      $(function(){
        console.log(“こんそーるろぐ”);
      });
    </script>

    コメントを残す

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