（ちょっとメモ）Prism の使い方（SyntaxHighlighterから乗り換えた）
最終更新日：2017年11月28日 （初回投稿日：2017年11月17日）
本サイトの シンタックスハイライターを Prism（プリズム）に乗り換えました。
これまで SyntaxHighlighter 3.0.83 を使っていましたが、順次差し替える予定です。
Prism は こんなかんじ。
<!--HTMLの場合-->
<pre class="line-numbers">
<code class="language-markup">some HTML code</code></pre>
<!--CSSの場合-->
<pre class="line-numbers">
<code class="language-css">some CSS code</code></pre>
Prism は 設置も簡単。しかも軽い。
MDN（Mozilla Developer Network）も Prism を使ってるというのも導入の後押しになりました。
というわけで今回は、Prism の使い方をメモっておきます。
Prism の特徴（メリット・デメリット）
一番のメリットは、ソースコードの記述が W3C が推奨するカタチなこと。
W3Cの仕様では、ソースコードを表記するときは、<pre>要素だけでなく <code>要素も一緒に使い、<code>要素に class属性で「language-◯◯」というカタチで「ソースコードの言語」を示すことを推しています。
Prism は、<pre> <code class="language-◯◯"> 〜 </code> </pre> という形が基本なので、まるっきりW3Cの推奨のカタチで書けます。
（これが <pre>要素だけで書かせる 他のシンタックスハイライター と違うところ なんだって）
そのほかのメリットは、
新要素・新プロパティに対応。言語数が多い。軽い。
「ハイライト行」をまとめて書けたりと、使い勝手もイイです。
一応デメリットは、<pre> と <code> で書くので、SyntaxHighlighter より記述が長く感じます。
また、タイトルを表示できない（SyntaxHighlighter は preの title属性でタイトルを表示できた）ので、ちょっと不便かな。JS自分で書ける人はできるんでしょうけど。
そして、 IE6 〜 8 は非対応だそうです。（もう要らないか）
Prism の導入準備
Prism のダウンロードページで、自分に必要なものをカスタマイズしてからダウンロードするようになっています。（不要なダウンロードをしないようになってる）
JavaScriptファイルと CSSファイルがダウンロードされます。
Prism のダウンロードページはこちら。
prismjs.com/download.html
ダウンロードページで「圧縮レベル」を選ぶ
まずはダウンロードするファイルの「圧縮レベル」を選びます。
要はミニファイ（インデントや改行が詰められていて軽い）されているかどうか。
JavaScript・CSSファイルを、自分で編集するなら「Development version」を選択。
編集せずにそのまま使うなら「Minified version」を。
ミニファイのほうが容量が小さくなります。（ミニファイして無くても相当軽いけど）
テーマ（スタイル）を選ぶ
次に「テーマ（スタイル）」を選びます。見た目の装飾です。
7種類用意されています。
7種類のテーマのプレビューは、左側の「縦に並んだ◯」のどれかを選択して↑、このページの一番下で見れます。（このサイト、見にくい。非デザイナーが作ったんでしょうね）
または Test drive（テストドライブ）ページで、 コードを入力してみたり、いろんな言語とテーマを選んで プレビューを確認できます。
使用する言語を選ぶ
ダウンロードページでの続きです。
「使用する言語（Languages）」を選びます。
127言語が用意されています（2017年11月現在）
プラグインを選ぶ
最後に「プラグイン（Plugin）」を選びます。
プラグイン名をクリックすると、そのプラグインの解説ページに飛べます。
最初の2つ「Line Highlight（ライン ハイライト）」と「Line Numbers（ライン ナンバーズ）」はゲットをオススメします。
「Line Highlight（ライン ハイライト）」は、行をハイライトする。
「Line Numbers（ライン ナンバーズ）」は行番号を表示するプラグインです。
CSS と js をダウンロード
必要なモノを選択し終わったらダウンロードします。
JavaScriptファイルと、CSSファイルが別々にダウンロードできるようになっています。
これは思いのほか効率的！
あとでテーマを変えたくなったら「CSSファイル」だけ、プラグインを追加したければ「JavaScriptファイル」だけをダウンロードすればいいので。
「prism.js」と「prism.css」がダウンロードされます。
Prism の設置
HTML上に「prism.js」と「prism.css」を設置します。
「prism.css」は、普通に <head>要素内に <style>要素で読み込ませます。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<link href="css/prism.css" rel="stylesheet">
</head>
「prism.js」は、<body>の一番最後に置きます。</body>の前。
<script src="js/prism.js"></script>
</body>
</html>
もうちょっと詳しい設置方法は、こちらをご覧ください。
Basic usage - Prism
Prism の基本の使い方
基本の使い方は、下のように <pre>要素の中に <code>要素を入れて、<code>要素に「class属性」で「language-xxxx」というカタチで「言語」を指定します。
<pre><code class="language-markup">HTML</code></pre>
<pre><code class="language-css">CSS</code></pre>
<pre><code class="language-js">JavaScript</code></pre>
これは W3C が推奨する HTML5 での「ソースコード」用のマークアップそのままです。
これだけでソースコードが色分けされて表示されます。
行番号や 任意の行をハイライトさせるには「プラグイン」が必要。プラグインの使い方は記事後半で。
Prism の言語のリスト
Prism では「HTML」は <code class="language-markup"> と指定します。
その他はだいたい通常の略称っぽい。
この language-xxxx の「xxxx」の部分のリストはこちらです。（クリックで開きます）
<pre> の属性でプラグインを使用する
プラグインをダウンロードすれば、さまざまな拡張機能を使えます。
試してみたモノをいくつか紹介します。
行番号を表示する（Line Numbers）
プラグイン「Line Numbers」をダウンロードして使います。
（プラグインはすべて「prism.js」に組み込まれます）
<pre>要素に class属性で「line-numbers」と指定することで 行番号が表示されます。
<pre class="line-numbers">
<code class="language-markup">some HTML code</code></pre>
<pre class="line-numbers">
<code class="language-css">some CSS code</code></pre>
最初の行番号は「1」以外にもできます。
<pre>要素に data-start属性で「数値」を指定することで、その数値の行からナンバリングされます。
<pre class="line-numbers" data-start="5">
<code class="language-markup">some HTML code</code></pre>
マイナスの値も指定できます。
<pre class="line-numbers" data-start="-7">
<code class="language-markup">some HTML code</code></pre>
行をハイライトする（Line highlight）
プラグイン「Line highlight」をダウンロードして使います。
<pre>要素にdata-line属性で「数値」と指定することで、その数値の行がハイライト表示されます。
<pre class="line-numbers" data-line="1">
<code class="language-markup">some HTML code</code></pre>
「数値」の指定方法
・連続した行の場合：「1-5」といった具合で「ハイフン」でつなぎます。
・離れた行を複数：「2,6,18」といった具合で「カンマ」でつなぎます。
・合わせ技も可能：「1-5,18,22-26」といった指定もできます。
<pre class="line-numbers" data-line="1,4-6">
<code class="language-markup">some HTML code</code></pre>
コメントテキストに任意のリンクを作る（Autolinker）
プラグイン「Autolinker」をダウンロードして使います。
このプラグインは「URL」と「e-mail」は自動的にリンクを貼ります。
さらに コメントテキスト内に任意のリンクを貼ることができます。
[リンクのテキスト](https://ex.com/)
というカタチで書きます。（これは Markdown構文というモノ）
下のプレビューでは、「ほんっとにはじめてのHTML5とCSS3」の部分にリンクを指定しています。
<!--このプレビューでは下記のテキストにリンクを貼っています<br>
[「ほんっとにはじめてのHTML5とCSS3」](http://honttoni.blog74.fc2.com/blog-entry-292.html#pt5-3)
リンクを貼れるのは「コメント内」に限ります。-->
このように書いています。
[「ほんっとにはじめてのHTML5とCSS3」](http://honttoni.blog74.fc2.com/blog-entry-292.html#pt5-3)
Markdown構文の「タイトル」（ [リンクのテキスト](https://ex.com/ "タイトル") ）には対応していませんでした。
HTMLのコメントだけじゃなく、他の言語のコメントテキストでもできます。
言語を表示する（Show Language）
プラグイン「Show Language」をダウンロードして使います。
これは、何もしなくても自動的に言語を左下に表示してくれます。
コードにマウスオーバーするとプレビューする（Previewer各種）
まずはベースになるプラグイン「Previewer: Base」をダウンロードし、必要なプラグイン「Previewer: ◯◯」をダウンロードしてセットで使います。
下記の種類があります。
Previewer: Color
「色指定」部分にマウスオーバーすると、ポップアップで「色」をプレビューします。
どんな言語でも「色指定」の箇所に反応します。
Previewer: Gradient
「グラデーション」指定部分にマウスオーバーすると、ポップアップで「グラデーションカラー」をプレビューします。
Previewer: Easing
「イージング」指定部分にマウスオーバーすると、ポップアップで「イージング」をプレビューします。
Previewer: Time
スタイルで「時間」を指定した部分にマウスオーバーすると、ポップアップで「速度」をプレビューします。
Previewer: Angle
「角度」を指定した部分にマウスオーバーすると、ポップアップで「角度」をプレビューします。
その他のプラグイン
そのほか、
File Highlight（外部ファイルをハイライトする）
Keep markup（コード内に <mark>要素を使って強調できます）
Toolbar（「コードを選択」などの機能ボタンを作ったりつけたりできる）
など、おもしろそうなプラグインがいろいろ。
このほかのプラグインは、プラグイン インデックスから、各説明を見られます。
CSSを編集してオリジナルのスタイルに
この「ほんっとに..」では、テーマ「COY」の CSSをアレンジして使っています。
「Prism.css」は、ダウンロードしたテーマのまま一旦ブラウザプレビューしてみて、Web開発ツール（SafariのWebインスペクターなど）で CSSの構造を確認して、自分の好きなスタイルに変更します。
- 関連記事
-
- （ちょっとメモ）Googleフォームで簡単・無料でフォームが作れる！
- （ちょっとメモ）Prism の使い方（SyntaxHighlighterから乗り換えた）
- （ちょっとメモ）FC2ブログで「最終更新日時」が使えるようになった！
- （ちょっとメモ）さようなら〜IE8♪
- （ちょっとメモ）FC2ブログに「カテゴリ別一覧」を作る
- （ちょっとメモ）FC2ブログに はてブ と Google+1 のボタンをつける
- （ちょっとメモ）FC2ブログで OGP設定（Facebook, Twitter Cardsも）
- （ちょっとメモ）StatCounter でブラウザのシェアを調べる
- （ちょっとメモ）FC2ブログで PC用テンプレートをスマホで適用させる
- （ちょっとメモ）WordPressプラグイン SyntaxHighlighter Evolved
- （ちょっとメモ）SyntaxHighlighter 3.0.83 の使い方
- （ちょっとメモ）HTML5情報サイト「HTML5.jp」
- （ちょっとメモ）IEにもCSS3の機能を使えるようにする「CSS3 PIE」
- （ちょっとメモ）ブラウザのCSS3とHTML5への対応サイト
- （ちょっとメモ）トラッキングクッキーの無効化
やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します！ (笑)
初心者にも使いやすい（と思う）レンタルサーバー
「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、
スターサーバー
や ロリポップ！
です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。
ちょっと料金は高いけど、さくらのレンタルサーバ
や、エックスサーバー
は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。
スポンサーリンク
コメントの投稿
ありがとうございます ＾＾
「Prism.js」の大変詳しい解説をほんとにありがとうございます ＾＾
おかげさまで困ることもなくブログテンプレートに設定出来ました。
私もはやくSyntaxHighlighterから置き換えたいと思っております（笑）
甚だ勝手ではありますが、こちらの記事にブログカードリンクを張らせて戴きました ＾＾
よろしくお願い致します。
Re: ありがとうございます ＾＾
コメントありがとうございます。
お役に立てて何よりです (^o^)
