Webページ上のコードを色分け表示する

新規作成日 2015-11-11

最終更新日 2016-12-26

概要

ホームページなどのwebコンテンツで操作の説明をする際、コードを表示したい場合があります。そんな時、ハイライト表示ができると読みやすく、また、見栄えも良くなります。ですが、htmlで１つ１つ指定していくのは大変ですので現実的ではありません。

webコンテンツ上のコード表示をハイライト表示にしてくれるツールが存在します。

私が把握しているのは上記の２つです。

「google-code-prettify」を使用して、htmlページに埋め込んだコードスニペットを修飾し、コードの強調表示をする方法を説明します。

「google-code-prettify」の公式サイトはGitHubに移動しています。

README.mdに使い方が書かれていますが、英語なので、ざっと確認するのには不便です。使い方を紹介しているサイトで情報を確認するか、README.mdを読むかのどちらかの選択になります。

提供されるドキュメントそのままでは、自分で利用するときに不便なので、使いやすいようにまとめ直してみました。