Prism.js

2022年7月25日

みなさんこんにちは。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回はシンタックスハイライター「Prism.js」について書きます。

参考：でざなり｜Prism.jsの使い方！シンタックスハイライトにおすすめ

Prism.jsとは

Prism.jsは、シンタックスハイライトをしてくれるプラグインです。

シンタックスハイライト（syntax highlighting：構文強調）とは、テキスト中の一部分をその分類ごとに異なる色やフォントで表示する方法のことです。

このブログではコードを載せるのに使っています。

使い方

① Prism.jsにアクセス→DOWNLOAD

② テーマ（色）を選ぶ

<div class="sample">
HTMLのサンプル
</div>

.sample {
  content: "CSSのサンプル";
  transform: rotate(90deg)!important;
}

$('.sample'.on('click', function() {
  $(this).jsのサンプル();
});

このブログではOkaidiaを使っています。

③ 言語を選ぶ

とりあえず最初の4つ（Markup、CSS、C-like、JavaScript）でいいと思います。

④ プラグインを選ぶ

Line Highlight→特定の行をハイライトできます。
Line Numbers→行の番号を表示できます。

他にも言語名を表示したり、コピーボタンを設置したり、いろいろできるみたいです。

⑤ jsとCSSをダウンロード

⑥ jsとCSSを設置

<script src="js/prism.js"></script>
                            
<link rel="stylesheet" href="css/prism.css">

⑦ CSSを追加

.code_break {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: auto;
}

スマホ時の左右スワイプをなるべく減らしたいので、折り返しの設定をしています。

コードを書いてみよう

<pre>と<code>を使います。

<pre><code class="language-Markup code_break">
                            
ここにコードを書く

</code></pre>

HTMLの場合はlanguage-Markup
CSSの場合はlanguage-css
JavaScriptの場合はlanguage-js
というクラスを記述します。

HTMLのコードをそのまま書くとそれ自体がタグとして認識されてしまうので、
< は &lt;
> は &gt;
と書きます。これをエスケープシーケンス（escape sequences）といいます。

<pre>～</pre>の間は、改行やスペースがそのまま反映されるので注意しましょう。

まとめ

どのテーマにするか迷ってしまいますね！

GitHubで、他にもさまざまなテーマを入手できるみたいです。

プラグインもいろいろ試してみたいと思います。