Prismとは

PrismとはHTML上でコードのハイライトを行うライブラリである。

追加のプラグインとしてコード部分の行番号表示なども行える。

背景色などのテーマも複数の中から選択可能である。

使用はcode要素にハイライトしたいコードの種類(HTMLやC言語など)を属性として指定するだけである。

• 公式サイト
• 行番号表示デモ

プラグイン

プラグインを追加することで機能を追加することができる。

プラグイン一覧

使用方法

導入

1. ダウンロードページからオプションを選択する
   
   1. Compression levelはPrismのコードを変更しないのであればMinified versionを指定する
   2. Languagesからハイライトしたいタイプの言語を指定する。
      多いほど読み込みに時間がかかるので、明らかに不要なものは含めない方が良い。
   3. Themesから使用したいテーマ(装飾)を指定する。
      気に入ったものがない場合はダウンロード後に自分でCSSを変更すればよい。
   4. Pluginsから使用したいプラグインを指定する。
2. 画面一番下の”DOWNLOAD JS”、”DOWNLOAD CSS”ボタンからそれぞれのファイルをダウンロードする
   ※画面最上部の”DOWNLOAD”ボタンを押すと選択がリセットされるので注意
3. 任意の場所にダウンロードしたJavaScript(prism.js)とCSS(prism.css)を配置する
4. Prismを使用したいページでファイルを読み込ませる

   <link rel="stylesheet" type="text/css" href="prism.css" media="all" />
   <script src="prism.js"></script>

使用

以下では行番号表示プラグイン(line-numbers)も使用している

HTML / XML など

<pre><code class="language-html line-numbers">
～～～
</code></pre>

JavaScript

<pre><code class="language-javascript line-numbers">
～～～
</code></pre>

Java

Javaプログラム

<pre><code class="language-java line-numbers">
～～～
</code></pre>

Javaスタックトレース

<pre><code class="language-javastacktrace line-numbers">
～～～
</code></pre>

JavaDoc

<pre><code class="language-javadoclike line-numbers">
～～～
</code></pre>

その他

ハイライトは不要だが、プラグインを使用する場合などで使用する。

<pre><code class="language-none line-numbers">
～～～
</code></pre>