埼玉のWebコンサルタント

お問合せ

シンタックスハイライトに「Prism.js」を使ってみた

シンタックスハイライトに「Prism.js」を使ってみた

ブログでコードを掲載するとき、コードが色分けされて表示されていたら見やすいので、「Prism.js」というJavaScriptのシンタックスハイライターを使ってみました。

Prism.jsとは

JavaScriptのシンタックスハイライターです。カラーリングのテーマと対応させる言語を選んでカスタマイズできます。カスタマイズないようにもよりますがJSとCSSをあわせても10KB程度と軽量です。

機能的にはコードを見やすく色分け表示してくれるだけですが、とにかく見た目が美しい!

Prism.jsのダウンロード

Prismの公式サイトで「Download」をクリックするとカスタマイズ画面になります。

テーマと言語を選んでカスタマイズ

デザインテーマとシンタックスハイライトさせたい言語と選びます。当ブログで使っているテーマは「OKAIDIA」です。

Prism.jsの使い方

ダウンロードしてきた「prism.css」と「prism.js」を読み込みます。

<!DOCTYPE html>
<html>
<head>
	<link href="prism.css" rel="stylesheet" />
</head>
<body>
	<script src="prism.js"></script>
</body>
</html>

これで準備は完了です。

あとは、掲載したいコードがあれば、その前後を<pre><code>で囲み、<code>class="language-XXXX"を指定するだけでOKです。

単語だけをハイライトしたいときは<pre>なしにすればOKです。

コードを掲載するときの注意点

コードは実態参照に変換しないと読み込まれません。
文字列 → 数値実体参照変換などでコードを変換してからアップしましょう。

コメントは受け付けていません。

トップに戻る