ブログにコードをきれいに表示させるprism.jsの使い方
ブログにコードを表示させたい！ そんなときはprism.jsがおススメです。 設定がとても簡単で、プラグインを使うと 言語、行数を表示させたり、 コピーボタンを設置したり、 特定の行をハイライトさせることも可能です。
prism.jsで必要なものをダウンロードする
必要なものにチェックを入れましょう！
軽量版で十分です。
テーマを選びます。
Default
Dark
Funky
Okaidia
Twilight
Coy
Solarized Light
Tomorrow Night
言語を選ぶ
必要な言語にチェックを入れましょう。
プラグインを選択
設定したものをダウンロード
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>文字をエスケープさせる
コードを直接記入すると、ブラウザはコードとして認識してしまいます。 そこで、エスケープ文字使います。
| 表示 | 文字実体参照 | 説明 |
|---|---|---|
| | 改行しない半角スペース | |
| < | < | 不等号（より小さい） |
| > | > | 不等号（より大きい） |
| & | & | アンパサンド |
| " | " | 二重引用符 |
| ' | ' | アポストロフィ |
| © | © | コピーライト |
<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>まとめ
- prism.jsで必要なテーマ、言語、プラグインをダウンロードし、CSSとJSファイルを読み込ませる。
- <pre><code>ここにコードを記述 </code></pre>
- 特定の文字はエスケープが必要
- プラグインを使うと利便性向上
