WordPressにPrismを導入[ インストール編 ]

0
contrail

このサイトでスクリプトなんかのソースコードをもろに
紹介するコトってかなり少ないけれど…
文章と差別化できるシンタックスハイライトって見やすいし、
なんとなくブログっぽさのグレードが増す気がしたので(笑)、
少し前に「Prism.js」ってプラグインを導入しましたー♪

シンタックスハイライトってのは
こんな感じでコード表示するブロックです。

この「Prism.js」はWordPressのプラグインと言っても管理画面ではなく、
自分でダウンロードしてきてFTPアップする手動タイプになります。
まぁ、導入に関しては面倒な部分があるけれど、
そのぶんカスタマイズが豊富に用意されている優れモノ♪
いや、むしろ選択が豊富すぎて迷うぐらいかも(汗)。

Prism.js の設置

1Themes でデザインの選択

まずはダウンロード画面の「Themes」でデザインを選択します。
これは完全に好みで、導入サイトの雰囲気に合うものを選べばOK♪
TOP画面の方がサンプル表示とデザイン切替えボタンが近いので、
先にTOPで比較しておいた方がスムーズですよ〜♪

2Languages で言語を選択

続いて表示予定の言語を「Languages」で選ぶのだけれど、
これが非常に多くて選別するのも一苦労(汗)。
もう面倒だから「全部!」って言ってしまいそうになる…(苦笑)。
でも、ファイルサイズ減量のためにちゃんと選びましょう。。。

3Languages の使用方法

上の(2)でチェックした言語をシンタックスハイライトで使用するときは
codeタグにclassで「language-言語名」と指定します。
ちなみに、短縮形の「lang-言語名」って書いてもOKですよ♪
その「言語名」の対応表はこちら…。

リンク先の黒ベタ白文字が「言語名」になります。

そもそものサポート言語が多いから情報量に引くけど(苦笑)。
基本的には html や css って言語名をそのまま小文字って法則っぽいから、
しっかり暗記しておかなくてもよさげですね♪

4Plugins でオプション機能を選択

最後に「Plugins」で行番号とかコピーボタンなど
好みの便利機能を追加すればここでの選択は完了ですよー♪
ちなみにこのサイトでチェックした機能は…

  • Line Highlight(指定の行をハイライト)
  • Line Numbers(行番号)
  • Normalize Whitespace(余分なインデントを削除)
  • Unescaped markup(エスケープ処理)
  • Toolbar(言語名やボタンのスペース確保)
  • Show Language(言語名を表示)
  • Copy to Clipboard Button(コピーボタン)

5javascript と 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でアクセスすれば
前回の続き(選択済み状態)から開始できます♪♪

0

RELATED POSTs

SELECT ITEMs [ AMAZON ]

kindle

COMMENTs 0

コメントを残す

・メールアドレスは非公開です
・htmlタグは使えません
・URLは無効となります
・name と comment( * )は必須です