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

自分でやるをバックアップするソクラテツチップスのバナー画像

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

ソースコードを色分け表示

ソースコードをわかりやすく表示「Hilight.Js」

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 ダウンロードのやり方

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

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

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

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;
【PR】まずは無料説明会から
ハイライト表示サンプル
<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}
次のページに進む

Hilight.js導入のあとは

pre要素のレイアウト整形のやり方

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

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

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

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

GoogleAdsense広告を速く表示する

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

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

画像の遅延読み込み実装でサイト表示高速化

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

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

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

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

PC(HP)
Googleアドセンスを中央に寄らない場合の対処法解説画面

Googleアドセンスが中央に寄らない場合のやり方

デフォルトで画面いっぱいに表示されるアドセンスですが、なぜかセンタリング出来ない場合の対処法を解説します。

PC(CSS)
縦スクロール時に横揺れするサイトの修正方法

縦スクロール時に横揺れするサイトの修正方法

縦クロールしたときブレたり横揺れてしまう場合のCSS対処法を解説(スマホタブレット)

PC(CSS)
グーグルアドセンス広告がはみ出す時の修正方法

グーグルアドセンス広告がはみ出す時の修正方法

レスポンシブ広告が横にはみ出すために起こるスマホの横揺れを解消!

PC(html)
preloadで先読みして高速表示する方法へのリンク画像

preloadで先読みして高速表示する方法

サーバーから先行してフェッチすることで、サイトの高速表示を実現します。

TOP