Home > TagScript > html、css、Java > シンタックスハイライト

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

新規作成日 2015-11-11
最終更新日

概要

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

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

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

google-code-prettifyでサイト上のコードのハイライトする

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

コードの所在

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

google-code-prettify (外部サイト)

使い方

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

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

google-code-prettifyを使って、自分のホームページで紹介するコードに色を付ける

はてなブログで「google-code-prettify」を使用する