JavaScript
CDN CSS Google Code Prettify HTML JavaScript linenums pre prettyprint

Google Code PrettifyをCDNで使う方法

2020.09.09

Google Code Prettifyとは

ソースコードをwebで掲載するためのスクリプトです。

HTML上で簡単にプログラミングコードをハイライト表示できます。

以下、githubのページです。

GitHub - googlearchive/code-prettify: An embeddable script that makes source-code snippets in HTML prettier.
An embeddable script that makes source-code snippets in HTML prettier. - GitHub - googlearchive/code-prettify: An embeddable script that makes source-code snipp...
github.com

CDNの読み込み方法

注意 ※バージョンや環境によっては正常に動作しない可能性があります。

CDNでの使い方は簡単で、以下のスクリプトをHTML内に記述するだけです。

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.jst"></script>

以前はrawgitというサービスを使っての配信だったようですが、サービス自体は終了とのことで、jsdelivrに変わっています。

とは言っても、rawditを入れても動くようではあるのですが、2019年10月で終了と公式ページにはありますので、Code Prettifyの公式に書いてあるjsdelivrに変更しておくのが良いのかなと思います。

この記事もそうですが、何年か経つと情報が古くなってしまい、古い情報が残ってしまっていて、それがGoogle検索で出てきてしまったりするので、できるだけ公式を見ておくのがよいと思います。

設定パラメータ

CDNの読み込みでは、run_prettify.jsの後にパラメータの設定をすることができます。

以下のコードがその一例です。

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?lang=html&lang=js&lang=css&skin=sunburst"></script>

詳細は以下を見ると確認できます。

https://github.com/googlearchive/code-prettify/blob/master/docs/getting_started.md

langで該当のプログラミング言語を指定できます。だいたいの言語は自動判別してくれるのであまり必要ではないです。githubの中で、各言語のjs一覧がありますが、ファイル名のlang-の後の文字列で指定します。

自分の環境ではCSSの自動判別が上手くいかなかったので、スクリプト内でcssをlang=cssパラメータで呼び、かつ、HTMLタグ内のクラスでもlang-cssを指定しています。

skinでは用意されているデザインを反映することができます。デザインはこちらで確認できます。

ファイルを見にくいとわかりますが、CSSで各クラスに色が指定されています。

自身のスタイルシートに同一名のクラスで設定すれば、色を等を変えることができます。

このサイトのコードも、sunburstのスキンを使っていますが、背景の色を少しだけ変えています。

ソースコードの表示例

<div>
  <p>テスト</p>
</div>

以上のソースコードを表示するために、以下のコードをHTML内に書いています。

<pre class="prettyprint"><div>
  <p>テスト</p>
</div></pre>

クラスにprettyprintを設定することで、jsが動作します。

実際にHTMLにアクセスすると、jsで自動で以下の形にコードが生成されます。

<pre class="prettyprint prettyprinted" style="">
  <span class="tag">&lt;div&gt;</span>
  <span class="pln"></span>
  <span class="tag">&lt;p&gt;</span>
  <span class="pln">テスト</span>
  <span class="tag">&lt;/p&gt;</span>
  <span class="pln"></span>
  <span class="tag">&lt;/div&gt;</span>
</pre>

クラスprettyprintを指定したpreで囲むと、上のように自動でタグ付けとクラス付けをしてくれて、そのクラスにcssで色が設定されている、という仕組みです。

行番号を振る

<div>
  <p>テスト</p>
</div>

ソースコードにに行番号を振ることができます。

<pre class="prettyprint linenums"><div>
  <p>テスト</p>
</div></pre>

クラスにlinenumsを指定すると、行番号が表示されます。

デフォルトでは5ずつしか出ないのですが、追加でcss設定をすることで、行番号を一行ごとに表示することができます。

公式では以下のcssが紹介されています。

<style>
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8 {
  list-style-type: decimal !important;
}
</style>

linenumsをクラス指定すると、行ごとにliタグが使用され、L0から順にクラスがふられます。

list-style-typeでdecimalを設定すると、数字が降られます（decimal-leading-zeroにすると01と頭ゼロがつく、など様々な設定ができる）。

行ごとに設定するのはめんどくさいので、以下で全部のliに設定を反映することができます。

.prettyprint ol.linenums > li {
  list-style-type: decimal; 
}

設定例

.prettyprint ol.linenums > li {
  list-style-type: decimal; 
}

.prettyprint ol li {
  margin:0;
}

pre.prettyprint{
  width:100%!important;
  background-color:#202020!important;
  font-size: 14px;
  line-height: 1.6;
  font-family: Consolas,SFMono-Regular,Menlo,Monaco,"Liberation Mono","Courier New",monospace;
}

当サイトでは、prettyprintを使った時のデザインに対して、以上のスタイルシートを反映させています。

デフォルトでwidthが95%になっていたので、まず100%にしています。そのままだと反映されなかったので、importantをつけています。

使っているスキンはsunburstなのですが、背景色がきついのでそこも少し変えています。

フォントサイズと行の高さを指定して、見た目を整えています。preにはテーマ内で行の高さが指定されているのですが、prettyprintを使うと別の設定が反映されてしまうので、ここでも設定しています。

行ナンバーをふると、liにmarginが設定されてしまうので、それを無くすためにprettyprint ol liの設定をしています。

あとはプログラミングのエディターで良く使われるフォントを指定しています。単純な好みですが、Consolasが一番好きなので、自分の環境でConsolasで表示されるように設定しています。

自身の環境はVSCodeなので、ぱっと見を近づけたかったというのも、このデザインにしている1つの理由です。VSCodeのデフォルトがConsolasでなかったら他のに変えてたかもですね～。この辺りは完全に好みなので、自分の好きなフォントにするのが良いかと思います。

行間とフォントとフォントサイズを整えると、それっぽくなりますね。

エディターではもっと行間が狭いですが、Webで読むとなると今ぐらいの表示が限界かな～と思っています。

見た目は自己満足でしかないのですが。

タイトルとURLをコピーしました