peamon.net

シンタックスハイライト(Google-Code-Prettify)の導入

"あれ"の名前が分からない

なんと表現していいのか分からないんだけど、ブログでよく見る、背景が黒くて、ソースコードを表示している"あれ"。

名前が分からないため、とりあえず、"html css ソース 表示"みたいなノリのキーワードで検索しまくっていると、"シンタックスハイライト"というワードを発見。

"あれ"ってシンタックスハイライトっていうんですね。"syntax"というのは"構文"、"highlight"は"強調"という意味だそうです。

Google-Code-Prettify

"シンタックスハイライト おすすめ"で検索すると、Google神が"Google-Code-Prettify"という機能をリリースしているとの情報をつきとめる。

HTMLサイトでも普通に導入できそう。

さっそく導入開始

上記のページに加えて、下記2つのページも参考にしました。

オートローダー版は難しいみたいなので、ダウンロード版を選択。

ダウンロードは下記のページ下部の【Download】から可能。"prettify-small.zip"というファイルです。

作業中の雑感

詳細は上記3つのページを見るほうが早いので、そちらへどうぞ。

テーマ

なんとなくDesertを選択。スキンの詳細は、Prettify Themes Galleryへ。

1行目にできる改行の謎

<code>を使うと、一行目に謎の改行ができる。なんでだろう?

どうやら、<code>直後の改行が反映されているっぽい。小一時間ほど沼ってしまった。

<code>の直後は、改行せずコードを書き続けないと。

始まりは<pre><code>で、終わりも</code></pre>で閉じる。

<pre>と<code>

<pre>と<code>のお勉強。

改行やスペースを、そのままウェブサイトに表示するためのタグが<pre>。プログラムのコードであることを示すタグが<code>。

言語ハンドラー

言語ハンドラー(lang-css.js)は、別に読み込ませなくてもいいかな。

そのままでも十分見やすいし、パッと見てソースコードだと分かれば問題なし。

アップロードしたファイル

ダウンロードしたGoogle Code Prettifyのファイルは、解凍したのちに、全てアップロードしています。

サイズは187Kだし、アップロードだけでファイルが呼び出されたりはしないので、大丈夫なはず。

最低限必要なファイルは、"prettify.js"と"prettify.css"だけ。

CSSの言語ハンドラーを使うのであれば、"lang-css.js"も必要。

スキンを使うのであれば、"skins"のフォルダも必要で、"prettify.css"は必要なし。

javascriptの記述場所

なぜ、<body>の最後にjavascriptを書く必要があるのか分からなかったので、検索してみると…。

HTMLの読み込みを邪魔しないため、という理由。まぁ、予想通りではある。

工夫をすれば、<head>内でもいけるみたいだけど、記述は</body>の手前にしておこう。

HTMLとCSSのコード

javascriptが絡むので、ややこしそうだったんですけど、なんとか導入までこぎつけました。

左クリックからソースを見てもらえば分かりますが、シンタックスハイライトをしたい場所を<pre>と<code>で囲み、<pre>にclass="prettyprint linenums"を指定するだけでOK。

特殊文字のエスケープ

コードを記述する際は、ガチで描写されないように、特殊文字である"<"と">"をエスケープする("<"を"&lt;"に 、">"を"&gt;"に置きかえる)必要があります。

特殊文字のエスケープについての詳細や、特殊文字変換ツールは、下記のリンクへ。

ちなみに、"&gt;"を">"ではなく、そのまま"&gt;"と表示するには、"&gt;"の"&"の部分を、"&amp;"に置きかえて、"&amp;gt;"と書けばOK…のはず。

あってますよね大丈夫ですよね。

<head>内

<link rel="stylesheet" href="../prettify/skins/desert.css">

スキンはDesertを使用。スキンを使う場合は、"prettyprint.css"を読み込む必要はなし。

CSSのパスは、シンタックスハイライトを使用したいページから見た相対パスを指定。

</body>の手前

<script src="../prettify/prettify.js"></script>
<script>
    window.addEventListener("load", function() {
      PR.prettyPrint();
    });
</script>
</body>

言語ハンドラー(lang-css.js)は、読み込ませていません。あとはコピペ。

このコードの追加は、シンタックスハイライトを使用したいページだけでOK。

CSS

CSSは、Web Design Leavesさんのコードをベースにしました。

.prettyprint  {
  font-size: 0.9em;
  line-height: 1.50;
  letter-spacing: 0;
  padding: 15px 5px 15px 0px;
  margin-left: 10px;
  margin-right: 5px;
}

pre.prettyprint code  {
  font-family: Consolas, 'Courier New', monospace;
}

.prettyprint ol  {
  white-space: pre-wrap;
  padding: 0 0 0 35px;
 }

.prettyprint ol.linenums > li {
  list-style-type: decimal;
  border-left:solid 1px #a2aea2;
  padding: 0 0 0 15px;
  margin: 0;
}

当然、自分が設定しているCSSが、シンタックスハイライトにも適用されるため、"letter-spacing"や"line-height"、"ol"、"li"などは、再設定が必要になるはず。

特に"ol"と"li"は、一度marginとpaddingを0に設定してから、デザインし直すほうが楽だと思います。

font-family

フォントはVScodeのfont-familyをそのままコピペ。

VScodeのfont-familyは【ファイル】→【ユーザー設定】→【設定】の上部にあるタブから"font-family"と検索すれば分かります。

"letter-spacing"も検索してみたところ、0に設定されていました。

.prittyprintにfont-familyを指定しても、codeのフォントが優先されますが、codeにfont-familyを指定すればフォントを制御できます。

demical

"demical"とは"十進数"という意味で、リストの頭が数字になる値だそうです。

デフォルトの状態では、行数が5刻みにしか表示されません。

white-space: pre-wrap

"white-space: pre-wrap"は、初めて見るのでお勉強。

"pre-wrap"とは、"改行や半角スペースがブラウザ表示にそのまま反映され、要素の端で行が折り返される"値のこと。便利なやつみたい。

最後に

調べ始めたときは、どうなるのかと不安だったんですが、参考にしたページのおかげで、シンタックスハイライトを導入することができました。

ricoさん、maesblogさん、Web Design Leavesさん、ありがとうございました。

改めて参考にした主なページのリンクを貼っておきます。

それと、そろそろjavascriptの勉強を始めないとダメかなぁ。

スラスラ書ける必要はないものの、何を書いてあるのか大雑把に理解できる必要はありますね。