prism.jsに切り替えた主夫

prism.jsのサイトのスクショ

変えた理由は見た目だけです。はい

highlight.jsでも充分に満足していたのですが、なんとなく変えてみました。prism.jsの存在をそもそも知らなかったのですが、中々いいですね。プラグインが結構豊富で、行番号をつけるプラグインは便利です!

prism.jsのサイトのスクショ

上の画像が、prism.jsのサイトトップです。右側に「Default」とか「Dark」とかのボタンみたいなのがありますが、ここをクリックすると、サイト下の方にあるサンプルソースコードの表示テストができる!というオシャレなサイトになってます。

例えば、Defaultの表示が下のような感じで、
prism.jsサイト、defaultのサンプル

Darkだとこんな感じになります
prism.jsサイト、darkのサンプル

以下、設定方法を詳しく紹介していきます。設定は、highlight.jsの場合とほぼ同じですので、highlight.jsを導入したことがある方は、簡単だと思います。逆に、prism.jsからhighlight.jsに切り替えたい人も、設定が似ているので簡単だと思います。

prism.jsの設定方法

prism.jsのサイト(http://prismjs.com/)に移動して、サイトの上の方にある「DOWNLOAD」ボタンをポチります。
prism.js、ダウンロードをクリック

使用したいテーマ・言語を選ぶ

DOWNLOADをクリックすると、以下の画面に遷移します。ここでは、ソースコード表示のテーマ(スタイル)と、ソースコードを表示させるプログラミング言語を選択します。
prism.jsで、テーマと言語を選択

デフォルトテーマは「Default」で、明るめのテーマです。また、デフォルトでチェックされている言語は「Markup」、「CSS」、「C-like」、「JavaScript」です。「Markup」はhtml用です。このスクリーンショットは、画面が途中で切れてますが、この下に色々なプログラミング言語があります(もちろんSwiftもあります)。

使用したいプラグインを選ぶ

サイトで使いたいプログラミング言語をチェックし終わったら、画面の下の方に行きます。そうすると、プラグインが列挙してあるので、使いたいものを選んで、チェックを入れます。
prism.jsで、プラグインの選択

プラグインは良く分からないかもしれませんが、プラグイン名をクリックすると説明ページに飛ぶので、色々見てみるといいかもしれません。プラグイン説明ページも全部英語ですが、画像付きで詳しく説明されているので、なんとなく分かると思います。私は、行番号表示が欲しかったので「Line Numbers」をインストールしました。

cssとjsファイルのダウンロード

テーマ・言語・プラグインが選択し終わったら、必要なファイルをダウンロードします。ページの一番下に「DOWNLOAD JS」という青っぽいボタンと、「DOWNLOAD CSS」という黄色っぽいボタンがありますんで、それらをポチります。そうすると、「prism.js」と「prism.css」というファイルがダウンロードされます。

サイト上でのファイルの読み込み

ダウンロードした「prism.js」と「prism.css」を、リモートサイトにアップします。アップが終わったら、header.phpに以下のような記述を足します。正確には、header.phpの</head>タグ直前に書きます。

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/css/prism.css" />
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/prism.js"></script>

書き方は結構適当です。prism.jsのサイトにも記述例がありますので、うまくいかなかったらそちらも参考して下さい。私は、prism.cssをcssディレクトリ以下に、prism.jsをjsディレクトリ以下に置いているので、こうなっています。highlight.js導入の記事も参考にしてみて下さい。記述はほぼ一緒です。

prism.jsの簡単な使い方

上記のコードもprism.jsで表示されてますが、書き方は

<pre class="line-numbers"><code class="language-php">
   ....
</code></pre>

という感じです。言語指定は「language-xxx」で行います。xxxの部分が、プログラミング言語です。Swiftなら、「language-swift」です。また、プラグインは<pre>タグの方に指定します。

まとめ

見た目を比べた場合、prism.jsの方がちょっとオシャレな感じがします。プラグインも充実してますし。また、prism.jsの場合、<code>タグのみで色付きのソースを表示できるのが良いです(highlight.jsの場合、ちょっとした設定が必要)。

でも、highlight.jsのシンプルな感じも結構好きでした。気分で変えたので、またhighlight.jsに戻すかもしれませんが、しばらくはprism.jsで行こうと思います。ただ、どちらのシンタックスハイライトも軽いので、サイトで使っているプラグインがちょっと重いなー、という方にはprism.js(もしくはhighlight.js)はオススメです。

追記:2016/01/29

なんかソース表示されている文字が大きいような気がしたので、調整しました。スタイルシートを触るのは嫌だったんですが、しょうがない。font-sizeを90%に指定。あと、自動的に20行くらいで折りたたむようになっていたので、max-height指定も解除しました。これで少し見やすくなったような気がします。

スポンサーリンク
広告1
広告1

シェアする

フォローする