HoBoFoTo

Hobo everyday foto.

日本語 English

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

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


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

p { color: red }

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

prismのダウンロード

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

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

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

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

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

prism-version

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

次にThemes(テーマ)を選択します。

prism-themes

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

次にLanguages(言語)を選択します。

prism-languages

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

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

prism-plugins

いろいろなプラグインがあります。

Line Highlight:行をハイライト表示する
Line Numbers:行番号を付ける
Show Invisibles:タブ記号や改行記号を表示する
Autolinker:自動でアドレスなどにリンクを張る
Show Language:使用言語を右肩に表示する

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

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

一番下にあるDOWNLOAD JSとDOWNLOAD CSSをそれぞれクリックして、prism.jsファイルとprism.cssファイルをダウンロードします。

長くなってきたので今回はここまでにします。
次回は、WordPressに組み込む方法を紹介したいと思います。
 

よかったらクリックしてください。
にほんブログ村 IT技術ブログ WordPressへ

共有:

コメントを残す

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