デザイン

htmlやCSSなどのソースコードをWeb上でハイライト表示する方法

large_9131894934
photo credit: Matheus Pratta via photopin cc

HTMLやCSSなどのソースコードをハイライト表示する方法のご紹介です。
よくプログラム/HTML/JavaScriptの解説記事などで見ると思います。
どんなものかというと、下記のようにコードに色などを付け足して、ユーザーに見やすいようにハイライト表示を行います。

<header id="header">
	<h1>ソースコードをハイライト</h1>
</header>

今回は、シンプルで実装も簡単に出来る、下記の2種類の方法をご紹介したいと思います。

  • Highlight.js
  • Google Code Prettify

SyntaxHighlighterという有名ライブラリもあるのですが、若干上記2つに比べると実装が面倒くさいかなーと印象だったので、今回はSyntaxHighlighterは外しています。
Google Code Prettifyは、当サイトでも利用しているのですが、上記2つに関しては、SyntaxHighlighterに比べて実装が簡単だということです。
まぁ、デメリットを上げるのであれば、SyntaxHighlighterよりも多機能ではないことですかね。
ですが、そんなにコードを表示する際に多機能な機能は、必要ないかなーと思います。
この辺は人それぞれ好みあると思いますけど。

実際に【Highlight.js】【Google Code Prettify】を利用したデモサイトも用意しましたのでご参考下さい。

Highlight.js Google Code Prettify

Highlight.js 実装方法

まずは、Highlight.jsの実装方法からご紹介していきたいと思います。

必要ファイルの読み込み

まずは、head要素内に必要ファイルを読み込みます。
今回は、CDNで読み込んでいますが、Highlight.jsのファイルをダウンロードして利用したい場合は、こちらよりダウンロードして下さい。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/tomorrow-night.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>

上記のtomorrow-night.min.cssは、Highlight.jsのテーマの一つとなります。
CSSファイルを変更することで、他のテーマを利用することが出来ます。
他のテーマを利用する場合は、下記のリンク先よりCSSファイルを確認してCSSのファイル名を変更すれば、違うテーマを利用できます。(※ファイル名に.minを付けるのを忘れないで下さい。)

テーマのCSSファイル確認

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/tomorrow-night.min.css">

テーマを変更したい場合は、下記のようにcssファイル名を変更する
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/tomorrow-night-blue.min.css"> 

JavaScript

次に、JavaScriptの記載をします。

<script>hljs.initHighlightingOnLoad();</script>

HTML

最後にハイライト表示したいコードを下記のように、precodeでマークアップします。
ハイライトしたいコードは、HTML特殊文字変換ツールなどを利用してエスケープして貼り付けて下さい。

<pre>
	<code>
		--ここにハイライトしたいコード--
	</code>
</pre>

上記まで記載したら、実装完了です。
あとは、下記のようにお好みでCSSでスタイルを調整も出来ます。

pre code{
padding: 20px;
line-height: 1.8;
border-radius: 10px;
	}

カスタマイズ

上記の方法だと、preタグとcodeタグでマークアップしないとハイライト表示が出来ません。
そうなると少し利便性に欠けますので、pre要素にjQueryのaddClassを利用して任意のクラス名を付け任意のクラス名の要素内にあるコードをハイライトする用にカスマイズをしたいと思います。
こちらのカスタマイズには、jQuery本体が必要となりますので、必ずhead要素内に読み込んで下さい。

任意のクラス名のコードをハイライト表示は下記のようになります。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/tomorrow-night.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<script>
$(function(){
   $('pre').addClass('highlight-code');
   $(".highlight-code").each(function(i, block) {
      hljs.highlightBlock(block);
   });
});
</script>

</head>

<pre>&lt;header id=&quot;header&quot;&gt;
	&lt;h1&gt;ソースコードをハイライト 動作デモサイト&lt;/h1&gt;
&lt;/header&gt;</pre>

上記を記載すれば、preタグにaddClassで【highlight-code】というクラス名を付加して、Highlight.jsでhighlight-codeのクラス名を指定しています。

Highlight.js デモサイト

Google Code Prettify 実装方法

次にGoogle Code Prettifyの実装方法のご紹介です。

必要ファイルの読み込み

まずは、下記の必要ファイルをhead要素内に読み込んで下さい。
今回は、CDNを利用して読み込んでいますが、ご自身でダウンロードして利用したい場合は、こちらからダウンロードして下さい。

<link rel="stylesheet" type="text/css" media="screen" href="https://google-code-prettify.googlecode.com/svn/loader/prettify.css">
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

HTML

最後に下記のように、ハイライトさせたいコードをpre要素にprettyprintのクラス名を付加します。
また、行番号を表示させたい場合は、linenumsをクラスに付け足せば、行番号も表示されます。

<pre class="prettyprint">
	--ここにハイライトしたいコード--
</pre>

行番号も表示する場合
<pre class="prettyprint linenums">
	--ここにハイライトしたいコード--
</pre>

Google Code Prettify デモサイト

上記のように記載すれば、実装完了です。
最後に、お好みでCSSなどでスタイルを調整してみてもいいと思います。
僕は、下記のようにCSSでスタイルを調整を行いました。

/*---------------------------------------------------------
  Google Code Prettify style
---------------------------------------------------------*/
.com {
      color: #93A1A1;
}
.lit {
      color: #195F91;
}
.pun, .opn, .clo {
      color: #93A1A1;
}
.fun {
      color: #DC322F;
}
.str, .atv {
      color: #DD1144;
}
.kwd, .linenums .tag {
      color: #1E347B;
}
.typ, .atn, .dec, .var {
      color: teal;
}
.pln {
      color: #48484C;
}
.prettyprint {
      background-color: #F7F7F9;
      border: 1px solid #E1E1E8;
      padding: 8px;
}
.prettyprint.linenums {
      box-shadow: 40px 0 0 #FBFBFC inset, 41px 0 0 #ECECF0 inset;
}
ol.linenums {
      margin: 0 0 0 33px;
}
ol.linenums li {
  color: #BEBEC5;
  line-height: 18px;
  padding-left: 12px;
  text-shadow: 0 1px 0 #FFFFFF;
  list-style-position:outside;
}
pre.prettyprint
	{
	background-color: rgb(248, 248, 248);
	color: gray;
	margin:20px 0px 20px 0px;
	font-family:"メイリオ", Meiryo;
	font-size:13px;
	width:100%;
	overflow:auto;
	border-color:#E0E0E0 !important;
	}
pre.prettyprint strong
	{
	background-color:yellow; 
	}
ol.linenums li
	{
	list-style: decimal outside;
	border-left: solid 3px #6CE26C;
	background-color: white;
	margin-bottom:0 !important;
	line-height:2;
	}
ol.linenums li.L1,ol.linenums li.L3,
ol.linenums li.L5,ol.linenums li.L7,ol.linenums li.L9
	{
	background-color: rgb(248, 248, 248)
	}

実際に【Highlight.js】【Google Code Prettify】を利用したデモサイトも用意しましたのでご参考下さい。

Highlight.js Google Code Prettify

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS img-caption-css

CSSのみで画像のキャプションをスライド表示する方法

NEXT hunterxhunter

HUNTER×HUNTER バトルオールスターズ VS.王(上級) を攻略したパーティメンバー