今後コードも記載することが多くなると思い、コード部分を見やすくするために、プラグインを導入しました。
ハイライトプラグインはいくつかあり、以下の3つが候補に上がりました。
どれもCDNで導入することができ、ファイルのダウンロードやアップロードは必要なく、タグを記載するだけで使用することができます。
中でも、Google code-prettifyが一番導入しやすいと感じたのですが、すでに開発が終了していることと、テーマが少ないことから今回はPrism.jsを導入することにしました。
当サイトのサーバーであるJimdoでは、ファイルのアップロードは可能ですが、基本的に閲覧者にダウンロードさせるためのアップロードとなっているようで、スタイルシートやJSファイルのアップロードが容易にできないため、CDNで導入していきます。
また、全ページ共通のBODYタグを編集できないため、本来BODYタグ内に記載すべきものも、HEADタグ内で導入しました。
左側メニューの「基本設定」＞「ヘッダー編集」を選択し、ヘッダー内に以下のコードを入力しました。
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/unescaped-markup/prism-unescaped-markup.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/unescaped-markup/prism-unescaped-markup.min.css" />
unescaped-markupプラグインも記載していますが、どうやらJimdoではscriptタグを強制的に変換かけるようで、正常に動作しませんでした。なので、HTMLタグはエスケープして使用しています。
この状態で、ハイライトしたいコードの部分の<pre>タグまたは<code>タグのclass属性に、言語の種類「language-xxxx」と行番号表示「line-numbers」を追加します。
<pre><code class="language-html line-numbers">
〜記述したいソースコード〜
</code></pre>
私はテーマを「Okaidia」にしていますが、他のテーマを使用したい場合は前述のヘッダー部分の8行目を別のテーマに変更することで、表示を変えることができます。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-dark.min.css" />
Prism.jsは超軽量にも関わらず対応する言語が多く、行番号の表示も容易で、大変導入しやすいと感じました。
今後、ブログ等でコードを記載する場合は活用していきたいと思います。