このサイトでスクリプトなんかのソースコードをもろに
紹介するコトってかなり少ないけれど…
文章と差別化できるシンタックスハイライトって見やすいし、
なんとなくブログっぽさのグレードが増す気がしたので（笑）、
少し前に「Prism.js」ってプラグインを導入しましたー♪
シンタックスハイライトってのは
こんな感じでコード表示するブロックです。
この「Prism.js」はWordPressのプラグインと言っても管理画面ではなく、
自分でダウンロードしてきてFTPアップする手動タイプになります。
まぁ、導入に関しては面倒な部分があるけれど、
そのぶんカスタマイズが豊富に用意されている優れモノ♪
いや、むしろ選択が豊富すぎて迷うぐらいかも（汗）。
Prism.js の設置
１Themes でデザインの選択
まずはダウンロード画面の「Themes」でデザインを選択します。
これは完全に好みで、導入サイトの雰囲気に合うものを選べばOK♪
TOP画面の方がサンプル表示とデザイン切替えボタンが近いので、
先にTOPで比較しておいた方がスムーズですよ〜♪
２Languages で言語を選択
続いて表示予定の言語を「Languages」で選ぶのだけれど、
これが非常に多くて選別するのも一苦労（汗）。
もう面倒だから「全部！」って言ってしまいそうになる…（苦笑）。
でも、ファイルサイズ減量のためにちゃんと選びましょう。。。
３Languages の使用方法
上の（2）でチェックした言語をシンタックスハイライトで使用するときは
codeタグにclassで「language-言語名」と指定します。
ちなみに、短縮形の「lang-言語名」って書いてもOKですよ♪
その「言語名」の対応表はこちら…。
リンク先の黒ベタ白文字が「言語名」になります。
そもそものサポート言語が多いから情報量に引くけど（苦笑）。
基本的には html や css って言語名をそのまま小文字って法則っぽいから、
しっかり暗記しておかなくてもよさげですね♪
４Plugins でオプション機能を選択
最後に「Plugins」で行番号とかコピーボタンなど
好みの便利機能を追加すればここでの選択は完了ですよー♪
ちなみにこのサイトでチェックした機能は…
- Line Highlight（指定の行をハイライト）
- Line Numbers（行番号）
- Normalize Whitespace（余分なインデントを削除）
- Unescaped markup（エスケープ処理）
- Toolbar（言語名やボタンのスペース確保）
- Show Language（言語名を表示）
- Copy to Clipboard Button（コピーボタン）
５javascript と CSS を入手
ここまでの選択が終わったらダウンロード画面の1番下にある、
あまりにも露骨でWeb広告と勘違いしそうな（苦笑）
大きなボタン「DOWNLOAD JS」と「DOWNLOAD CSS」から
javascriptとCSSを入手します。
んで、ダウンロードした「prism.js」と「prism.css」を
WordPressのhead内に読み込ませれば導入完了！
あとは記事に表示したいソースコードを「htmlとして編集」から
<pre><code> タグで囲んであげればOKですよ♪
とりあえずプラグイン（Plugins）の表示設定は後回しにして、
基本的な最小の使い方はこんな感じになります…。
言語名の指定「class=”lang-言語名”」を記述するのは
<pre> と <code> のどちらでも大丈夫ですよ。
ちなみに…
もし言語やPluginsを追加（削除）したくて再選択する場合、
また初めからチェックしていくのは大変なので（汗）、
ダウンロードした「prism.js」ファイルの冒頭にあるURLでアクセスすれば
前回の続き（選択済み状態）から開始できます♪♪
COMMENTs 0