コードハイライトを Crayon Syntax Highlighterから prism に乗り換える（前編）

Crayon Syntax Highlighterを数か月、使っていたのですがプラグインの動作が重いので、プラグインを使わないprismに乗り換えることにしました。

prismはプラグインを使わないコードハイライトです。

p { color: red }

上のような感じで表示することができます。

prismのダウンロード

それでは、prismを使っていくために必要なファイルをダウンロードしましょう。

まずは、prismのホームページに行きます。

ここでは、右横の丸の部分をクリックすることで、どんな感じで表示されるのかサンプルを見ることができます。（現在７つのテーマがあります。）

よさそうなテーマが見つかったら、上にあるDOWNLOADという所をクリックします。

このページでは細かくオプションを設定できます。
まず、Compression level（圧縮レベル）を設定します。

prism-version

Development version（開発版）とMinified version（縮小版）があるのでどちらか選びます。よほどのことがない限り、Minified versionでいいと思います。

次にThemes（テーマ）を選択します。

prism-themes

７つの中から気に入ったものを選んでください。

次にLanguages（言語）を選択します。

prism-languages

ここでは、ハイライト表示させたい言語を選びます。例えば、HTMLの場合Markupを選びます。いくつ選んでもいいですが選ぶほどにファイルが大きくなるので、必要な言語だけを入れるようにしましょう。

最後にplugin（プラグイン）を選択します。

prism-plugins

いろいろなプラグインがあります。
例
Line Highlight：行をハイライト表示する
Line Numbers：行番号を付ける
Show Invisibles：タブ記号や改行記号を表示する
Autolinker：自動でアドレスなどにリンクを張る
Show Language：使用言語を右肩に表示する

自分に必要なプラグインを選択してください。

これでオプション設定は終了です。後はファイルをダウンロードします。