ソースコードやHTMLタグをハイライト

広告

ソースコードやHTMLタグの記述をブラウザで表示したくなる時が稀にあるかと思います。(特に開発ブロガー)
簡単にハイライトして見やすくしてくれるGoogle Code Prettifyの導入方法を紹介します。

Google Code Prettifyの導入


実ファイルを落としてきて参照するやり方もありますが、以下のようにリンクでアクセスするやり方のほうが簡単です。
headタグ内で読み込ませてください。
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"></script>

ちなみにskinパラメータの引数を変えることによってデザインを指定できる。
以下5種類あるので置き換えて確認してみよう!
default, desert, sunburst, sons-of-obsidian, doxy
サンプルサイト

修飾するソースコードをタグで囲う


<pre class="prettyprint">ここにソースコードを記述</pre>

これだけ!

HTMLやタグを表示する


ソースコードなら上記記述だけで行けるが、HTMLやタグ系は表示することができない。
これら表示したい場合はタグをエスケープしなければいけない。
↓表示されてるのはエスケープ処理をしているから。
<html>
<head></head>
<body></body>
</html>

ちなみに自分でエスケープしなくてもここらへんのサイトで掲載したいタグを丸コピして変換すると便利!
そんな感じでタグを掲載する際は必ずエスケープが必要になります。

行番号を表示する


行番号を追加したいときは「linenums」要素を追加する。
<pre class="prettyprint linenums">ここにソースコードを記述</pre>

ただしこれだけだと5行間隔である。通し番号にしたい場合はstyleタグに以下も追加。
<style type="text/css">
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8.L9{list-style-type:decimal}
</style>

こんな感じで行番号が表示されるようになりました!
<html>
<head></head>
<body></body>
</html>

ちなみに・・・自分は上記だとスマホで行番号が隠れてしまいうまく表示されませんでした。
なので以下のように書き換えて修正しました。
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8, li.L9 {
list-style-position: outside;
list-style: decimal;
border-left: 1px #707070 solid; /* 縦線もいれたりできます */
margin-left: 2rem; /* SPだと左に隠れてしまうのでマージンを設定 */
padding-left: 1rem;
};
こんな感じで詳細に指定することも可能です。
このケースに限らず、カスタマイズ性は高そうですね!
広告

Profile