HTMLにソースコードを色分け表示したい

ソースコードをハイライト表示する-ライブラリhighlight.js-

Planet20xxPC用バナー Planet20xxモバイル用バナー

PagespeedInsightの改善方法を試しているうちにソースコードを色付けして、わかりやすくホームページ上に表示できたらなと思ったので、軽量ライブラリ「highlight.js」を導入してみました。

簡単に出来るので、これからの方におススメです( ´ ▽ ` )ノ。

コードを表示する方法

サンプル
ハイライトなしでも表示は可能だが、視認性が低い

ウェブページにコードを掲載したいときは、これはコードですと伝えるために<PRE><CODE>~</CODE></PRE>で囲むことで、ホームページ上に掲載することができます。

<PRE>は、半角スペースや改行や、タブなどホワイトスペースをhtml記述どおりに表示するというタグです。

※1行記載の場合は不要

<CODE>は、プログラムのソースコードであることを表すタグです。この2種類の要素を使用することで、ウェブページに表示することができます。

ソースコードを普通に記述すると見づらいと言うスペラン君
でも見づらいなあ

そうなんです!たしかに見づらいんです。

ハイライト表示とは

ソースコードをハイライト表示すると色分けされてとてもわかりやすくなります
ソースコードを色分けして、見やすく表示してくれます。

そこでわかりやすくハイライト表示したい!と実現してくれるのが「SyntaxHighlight」(構文強調表示)という拡張機能です。

ハイライトとは「目立たせる」・「強調する」といった意味で、注目の場面や見どころのシーンといった感じでTVでよく耳にするかと思います。IT用語でも、指定された文中の特定の記号やキーワードなどを他とは異なる色や装飾で表示するといった意味で使われていて、ソースコードも見やすく表示されます。

ソースコードがハイライト表示されたことで、見やすくなったと喜ぶキーン
めっちゃ見やすいね!

ハイライターにはいろいろ種類があるんですが、ポピュラーなsyntaxhighlighter、highlight.js、googleのcode-prettifyを比較してみました。

ハイライター比較

ハイライター設置方法メリットデメリット
syntaxhighlighter難有見栄えがいい重い
highlight.js簡単軽くて速い行番号表示がない
google code-prettify簡単見やすいカスタマイズが必要

比較した結果、行番号表示がないのと、目的であるPagespeedInsightのスコア減点対象とならないような動作が軽くて速いhighlight.jsを選ぶことにしました。

highlight.jsダウンロードのやり方

highlight.jsダウンロードサイトへのリンク

Getting highlight.jsにアクセスします

必要な言語を選択している画面

Custom packageの欄から必要な言語をチェックし、左下にある「download」からダウンロードします。

※CDNはファイルサイズが大きいので、このページでは必要な言語を選択したjsファイルのダウンロードで解説します。
解凍後
ダウンロードしたhighlight.jsを解凍したフォルダのスクリーンショット

  1. highlight.zipを解凍します
  2. highlight.pack.jsとstyleフォルダにある好みのCSSファイルを自分のサーバーにアップします
※ここではjs/highlight/というフォルダを作成し、そこにjsファイルを格納することとします
【リンク】

※CSSデザイン(highlight.js demo)はここから確認できます。

ハイライトの使い方-html内の記述

スタイルシート
<link rel="stylesheet" href="js/highlight/styles/androidstudio.css">

htmlのヘッダー内でスタイルシートを読み込みます。

※サンプルはandroidstudio.cssになっていますが、アップロードしたcss名に書き換えてください。
javascript
<script src="js/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

読み込み速度を意識して、JavaScriptとメソッドの読み込みは</body>の直前で読み込みます

記述の基本形

<pre><code class="html">...</code></pre>

ウェブ上にソースコードをハイライト表示する基本記述スタイルです。codeのクラスは自動検出されますが、記述する言語を指定しておいた方がよりいいです。

また1行目は <code>タグの後、改行するとズレが生じるので、改行せずに入力します。

<code></code>内では、特殊文字を表示する場合、&「表示したいものを指定」「;」と入力します。

特殊文字記入例

  • &&amp;
  • "&quot;
  • '&apos;
  • <&lt;
  • >&gt;
ハイライト表示サンプル
<script>    
(function(window, document) {
  function main() {
    // GoogleAdSense読込み
    var ad = document.createElement('script');
    ad.type = 'text/javascript';
    ad.async = true;
    // 新コードの場合、サイト運営者IDを書き換えてコメントアウトを外す
    // 旧コードの場合、コメントアウトしたままにする
    //ad.dataset.adClient = 'ca-pub-XXXXXXXXXXXXXXXX';
    ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
    var sc = document.getElementsByTagName('script')[0];
    sc.parentNode.insertBefore(ad, sc);
  }

  // 遅延読込み
  var lazyLoad = false;
  function onLazyLoad() {
    if (lazyLoad === false) {
      // 複数呼び出し回避 + イベント解除
      lazyLoad = true;
      window.removeEventListener('scroll', onLazyLoad);
      window.removeEventListener('mousemove', onLazyLoad);
      window.removeEventListener('mousedown', onLazyLoad);
      window.removeEventListener('touchstart', onLazyLoad);
      window.removeEventListener('keydown', onLazyLoad);

      main();
    }
  }
  window.addEventListener('scroll', onLazyLoad);
  window.addEventListener('mousemove', onLazyLoad);
  window.addEventListener('mousedown', onLazyLoad);
  window.addEventListener('touchstart', onLazyLoad);
  window.addEventListener('keydown', onLazyLoad);
  window.addEventListener('load', function() {
    // ドキュメント途中(更新時 or ページ内リンク)
    if (window.pageYOffset) {
      onLazyLoad();
    }
  });
})(window, document);</script>

pre要素は右端で改行されないので改行させたい場合、highlightのcss内でpre要素のwhite-spaceプロパティにpre-wrapを指定します。

CSS

pre{white-space:pre-wrap}

【関連記事】

PC(Javascript)
CDNとサーバー読み込みのイメージ画像

CDNとレンタルサーバーのjsファイル読み込み比較

jsファイルを利用できるCDNのパフォーマンスと稼働時間を調べてみました。

PC(html)
DNSプリフェッチでリレーションしているイメージ画像

GoogleAdsense広告を速く表示する

DNSプリフェッチで5つの参照先を事前リレーションするだけで、すばやく表示されます

PC(html/Javascript)
スマホでの画像遅延読み込みイメージイラスト

表示スピードアップ!画像遅延読み込み実装

PagespeedInsightのスコア改善に役立つ画像遅延読み込みの実装方法についてわかりやすく解説します

PC(HP)
画像の最適化手順を説明したページへのリンク画像

画像を軽くする最適化はお済みですか?

画像にはいろいろな情報が入っています。ムダな部分を削除して容量を小さくしましょう。

PC(html)
DNSプリフェッチでリレーションしているイメージ画像

GoogleAdsense広告を速く表示する

DNSプリフェッチで5つの参照先を事前リレーションするだけで、すばやく表示されます

PC(html)
アフィリエイトの後ろになぜかある1ピクセル画像を究明するイメージ画像

謎の1ピクセル画像を究明

Amazonアソシエイトコードにあるimgタグの1ピクセル画像をご存知ですか?

PC(HP)
Googleアナリティクスで特定のIP除外する方法

Googleアナリティクスで特定のIPアドレスを除外する方法

自分アクセスによる訪問カウントを取得しないための設定

PC(Windows)

WindowsでもHelveticaフォントを使いたい!Arialじゃ満足できない方必見

TOP