deeplus+

  • CSS

  • jQuery

  • Tips

シンタックスハイライトgoogle code prettifyの初期設定の注意点とCSS設定

このサイトでも使っているソースコードに自動で色を付けてくれるシンタックスハイライトgoogle code prettify。設置方法は簡単ですが、行番号を表示させる時に躓いたので覚え書きです。

配布元： google code prettify

Google Code Prettify の設置方法

配布元からファイルを一式ダウンロードしたら、prettify.css と prettify.js ファイルをjQueryと一緒に読み込ませます。

<link rel="stylesheet" href="prettify.css">
<script src="jquery.min.js"></script>
<script src="prettify.js"></script>
<script>
    $(document).ready(function() {
        prettyPrint();
    });
</script>

後は pre タグに prettyprint と class 指定すると

<pre class="prettyprint">
<!-- 色は付いていますか？ -->
<div>
  <h2>見出し</h2>
  <p>本文</p>
</div>
<!-- //色は付いていますか？ -->
</pre>

ソースコードに上記のように色が付いていたら設置完了です。コードの色は prettify.css で変更します。ちなみにこのサイトではSublime Textのテーマ Spacegray を参考にしています。このテーマを参考にしたい方は下記からCSSをご確認ください。

テーマ：Sublime Text - Spacegray 風の配色 prettify.css

行番号の表示方法

行番号を表示する場合は prettyprint と一緒に linenums の class を追加します。

<pre class="prettyprint linenums">
<!-- 色は付いていますか？ -->
<div>
  <h2>見出し</h2>
  <p>本文</p>
</div>
<!-- //色は付いていますか？ -->
</pre>

本来はこれで表示されるのですが、大抵の人は思ったようには表示されないはずです。自分が躓いたのは2点

  1. テスト用のコードが4行以下になっている。
  2. reset.cssを読み込んでいる。

1. テスト用のコードが4行以下になっている。

1.は初期設定では5行ごとに表示されるようになっているためです。prettify.css から、list-style-type : none ; をコメントアウトするか、下記範囲を全て削除すると表示されるようになります。

li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { /*list-style-type: none*/ }

2. reset.cssを読み込んでいる。

2.は google code prettify が行番号を ol タグで付けているため、reset.css を入れているとそのままでは表示されません。また数字分内側に入れる為に padding の設定が必要です。

pre.linenums ol{
  list-style: decimal;
  padding:0 0 0 40px
}

ソースコードを見易くする

上記に加え、カラーリングテーマの変更や、ソースコードの表示部分にGoogle Fonts等で等幅フォントを指定するとさらに見易くカスタマイズ出来ます。このサイトでは下記参照元を参考に Source Code Pro を使用しています。

<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
<style>
h1 {
  font-family:'Source Code Pro', sans serif;
  font-weight:400;
}
</style>

参照元：