Tools

ブログにソースコードをキレイに表示する（埋め込む）方法【シンタックスハイライト設定】

WordPressやHTMLで運用しているブログやサイトにソースコードを見やすく表示（埋め込み）したり、コピペが簡単にできるようにするにはシンタックスハイライター（シンタックスハイライトが出来るツール）を使います。

軽量で使いやすいシンタックスハイライター「Prism」の設定方法を整理してまとめました。

「シンタックスハイライト」とは

シンタックスハイライト（syntax highlighting）とは、テキストを分類ごとに異なる色やフォントで表示できるテキストエディタ機能です。

プログラミング言語やマークアップ言語など構造化された言語をシンタックスハイライトすることで、ソースコードの構造やエラーが視覚的に確認しやすくなるので、ソースコード記述が簡単になります。

また、WordpressやHTMLで運用しているブログやサイトにソースコードを見やすく表示（埋め込み）したい場合にも便利です。

シンタックスハイライターの種類と比較

シンタックスハイライトができるツール「シンタックスハイライター」はシンタクスハイライトライブラリを使う方法がオススメです。

シンタックスハイライトライブラリには、【highlight.js】【SyntaxHighlighter】【google-code-prettify】【Prism】があり、UIや機能に特徴があります。

WordPressをお使いの場合は、ワードプレス内のプラグインでも実装できますが、表示が遅くなったりセキュリティーなどの問題があるため避けた方がいいと思います。

当サイトでは必要な機能、デザイン、機能が選べる【Prism】を使用しています。

無駄な機能をインストールしなくて良いので操作が軽く、CSSでデザインをカスタイマイズしやすい点が気に入っています。

シンタックスハイライター「Prism」

シンタックスハイライター「Prism」は、無料で使えるJavaScriptとCSSがセットになったライブラリで、簡単なコードで必要な機能を呼び出せます。

「Prism」は何より動作が軽いことが最大のメリットで、CSSで好みのデザインに調整したり、行番号、コピペ、マークアップ、言語表示、タイトル表示、コピペ機能などもあります。

「Prism」の設定方法

「Prism」を設定・導入の大まかな流れは以下の通りです。

  • 「Prism」公式サイトから必要なファイルをダウンロード
  • ダウンロードしたファイルをサーバーにアップロード
  • アップロードしたファイルを読み込ませる

「Prism」公式サイト（英語）では、使いたいデザイン・言語・機能を選んでチェックし、ファイルダウンロードボタン（CSSファイルとJSファイル）を押すだけです。

  • Compression levelを選ぶ
    Development versionはスクリプト未圧縮、Minified versionは圧縮済みのスクリプトなので、特に操作が必要ない場合はMinified versionを選択しましょう。
  • Themesからデザインをひとつ選ぶ
    テーマ名をクリックすると、実際の表示が確認できるので好みのテーマを選びましょう。
  • Languageから使う言語だけ選んでチェックマークをつける
    必要なソースコードの言語だけを選択し、ファイルサイズを小さくしましょう。
  • Pluginsから使いたい機能を選ぶ
    行番号の表示やクリップボードへコピーボタンなどの必要な拡張機能だけ選びましょう。
  • CSSファイルとJSファイルをダウンロード
    【Download JS】ボタンをクリックしてJavascriptファイルを、【Download CSS】ボタンをクリックしてCSSファイルをダウンロードします。

「Prism」公式サイトダウンロード設定ページへのリンクはこちら。

「Prism」公式

ファイルをダウンロードしたら、サーバーにアップロードし、アップロードしたファイルを読み込ませる記述をします。

「Prism.js」使い方（書き方テンプレート）

xxxの部分（タグのclass属性）ソースコードの言語種別を指定します。


<pre><code class="lang-xxx">
<!--ここにソースコードを書く-->
</code></pre>

HTMLの場合


<pre><code class="language-markup">HTML</code></pre>

CSSの場合


<pre><code class="language-css">CSS</code></pre>

JavaScriptの場合


<pre><code class="language-js">JavaScript</code></pre>

「Prism.js」使用時の注意点

☑️「code」「pre」タグのコメントアウト

テーマの「code」「pre」タグに独自のCSSを設定している場合は、適用スタイルが競合してデザインが崩れてしまう場合があるので、該当タグをコメントアウトまたは削除して調整しましょう。

☑️タグの「<」と「>」の記号をエスケープ

当然ですが、html内でタグをそのまま書くとタグだと認識してしまうのでエスケープ（適切なコードに変換）が必要です。

サイトに定義を設定するか、HTML入力ごとに変換しましょう。

-Tools