▲TOPへ戻る

ブログにコードをきれいに表示させるprism.jsの使い方

ブログにコードを表示させたい! そんなときはprism.jsがおススメです。 設定がとても簡単で、プラグインを使うと 言語、行数を表示させたり、 コピーボタンを設置したり、 特定の行をハイライトさせることも可能です。

prism.jsで必要なものをダウンロードする

必要なものにチェックを入れましょう!

軽量版で十分です。

prism.js

テーマを選びます。

prism.js

Default

prism.js

Dark

prism.js

Funky

prism.js

Okaidia

prism.js

Twilight

prism.js

Coy

prism.js

Solarized Light

prism.js

Tomorrow Night

prism.js

言語を選ぶ

必要な言語にチェックを入れましょう。

prism.js

プラグインを選択

prism.js

設定したものをダウンロード

prism.js

prism.jsの設定

HTMLのhead内に以下のように、prism.cssを読み込む。

<link rel="stylesheet" type="text/css" href="prism.css" />

HTMLのbodyの手前に以下のように、prism.jsを読み込む。

<script src="../../8JS/prism.js"></script>
</body>

コードの書き方

<pre><code>ここにコードを記述していく </code></pre>

<code>にclass="language-言語"を指定

<pre><code class="language-html"></code></pre>

文字をエスケープさせる

コードを直接記入すると、ブラウザはコードとして認識してしまいます。 そこで、エスケープ文字使います。

よく使う特殊文字
表示 文字実体参照 説明
  &nbsp; 改行しない半角スペース
< &lt; 不等号(より小さい)
> &gt; 不等号(より大きい)
& &amp; アンパサンド
" &quot; 二重引用符
' &apos; アポストロフィ
© &copy; コピーライト
このように記述します。
prism.js
以下のように表示されます。
<pre><code class="language-html"></code></pre>

プラグインの使い方

行数を表示

Line Numbersのプラグインをダウンロードし、以下のように記述します。

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

特定の行をハイライトさせる

Line Hightlightのプラグインをダウンロードし、以下のように記述します。

<pre data-line="1, 4-6"><code class="language-html"></code></pre>

1行目と、4-6行目がハイライトされました。

<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>

まとめ

  1. prism.jsで必要なテーマ、言語、プラグインをダウンロードし、CSSとJSファイルを読み込ませる。
  2. <pre><code>ここにコードを記述 </code></pre>
  3. 特定の文字はエスケープが必要
  4. プラグインを使うと利便性向上

こんな記事も読まれています。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。

パソコン

javascript

カメラ

ブログ