Prism.jsの使い方と導入手順｜初心者向けコード装飾の決定版ガイド

4

Views

Prism.jsの使い方｜コード装飾の具体的手順

ブログや技術記事でコードを読みやすく美しく表示したいときに活躍するのが、Prism.jsという軽量ライブラリです。
HTML・CSS・JavaScriptなどのコードをカラフルにハイライト表示でき、テーマ変更や行番号の追加も簡単。

この記事では、Prism.jsを実際に入手して使う具体的な手順を、初心者向けに丁寧に解説します。

Prism.jsとは？

Prism.jsは、コードにシンタックスハイライト（構文色付け）を加えるための軽量かつ高機能なJavaScriptライブラリです。
公式サイトでは、使いたい言語・テーマを選んで必要最小限の構成を自分で作成できます。

Prism.jsを入手する手順

以下の手順で、自分専用のPrism.jsファイルを入手できます。

  1. 以下のURLにアクセス：
    https://prismjs.com/download.html
  2. 使いたい言語（例：HTML、CSS、JavaScriptなど）にチェック
  3. プラグイン（任意）：行番号、行ハイライトなどを選択
  4. テーマを選択（おすすめ：Tomorrow、Okaidia など）
  5. 「Download JS」ボタンをクリックしてJavaScriptファイルを保存
  6. 「Download CSS」ボタンでテーマのCSSも保存

これで自分だけのPrism.js構成が完成します。

CDNで簡単に使いたい場合

まずは試してみたいという方は、CDN経由で読み込むのがおすすめです。

<!-- Prism CSS（テーマ） -->
<link href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism-tomorrow.css" rel="stylesheet" />

<!-- Prism.js本体 -->
<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script>

<!-- 必要な言語（例：CSS、JS） -->
<script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-css.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs/components/prism-javascript.min.js"></script>

WordPressの場合：header.phpまたはfooter.phpに貼り付けます。

コードの書き方

記事内で表示したいコードは、<pre><code>タグで囲い、クラスにlanguage-○○を付けます。

<pre><code class="language-html">
<div class="box">Hello!</div>
</code></pre>

これだけで、ハイライト表示が自動的に適用されます。

人気テーマの一覧

Prismには多数のテーマが用意されています：

  • prism.css（標準）
  • prism-tomorrow.css（ダーク）
  • prism-okaidia.css（黒×紫系）
  • prism-coy.css（明るめポップ）

行番号を表示したい場合

以下を追加することで行番号を表示できます：

<script src="https://cdn.jsdelivr.net/npm/prismjs/plugins/line-numbers/prism-line-numbers.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/prismjs/plugins/line-numbers/prism-line-numbers.css" rel="stylesheet" />

<pre class="line-numbers"><code class="language-css">
body {
  margin: 0;
}
</code></pre>

注意点とアドバイス

  • ビジュアルエディターでは崩れやすい：テキストモードでの入力推奨
  • 多くの言語を読み込むと重くなる：必要なものだけに絞る
  • WordPressテーマのCSSと干渉する場合：Prismのスタイルが優先されるように工夫が必要

おわりに

Prism.jsは、軽量・シンプル・美しいという3拍子揃ったコード装飾ライブラリです。
特に技術系ブログやポートフォリオにおいて、読みやすさや信頼感を高めてくれます。

ぜひPrism.jsを導入して、あなたの記事やサイトの魅力をさらに引き立てましょう！

関連記事