はじめに
ソースコードやHTMLタグの記述をブラウザで表示したくなる時が稀にあるかと思います。
=>ワードプレスなどのCMSを用いらず、自前で開発ブログを書いているような人？
今はワードプレスのプラグインに頼りっきりで使用することは少なくなりましたが、忘れないうちにメモしようと思います。
そんなわけで、今回は、簡単にソースコードをハイライトして見やすくしてくれるGoogle Code Prettifyの導入方法 + ちょっとしたカスタマイズについてご紹介します。
※今回、ご紹介中に表示されているソースコードハイライトはワードプレス側のプラグインを使用しているので、見え方は実際と違うのでご注意ください。
Google Code Prettifyの導入
実ファイルを落としてきて参照するやり方もありますが、以下のようにリンクでアクセスするやり方のほうが簡単です。
headタグ内で読み込ませてください。
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js></script>とっても簡単ですね！
使い方
修飾するソースコードをpre class=”prettyprint”タグで囲ってあげましょう。
<pre class="prettyprint">ここにソースコードを記述</pre>これだけ！
HTMLやタグを表示する
ソースコードの表示はタグで囲ってあげるだけでキレイに表示されますが、HTMLやタグの場合そうはいきません。
うまく表示する方法として、タグをエスケープしてから囲ってあげましょう。
エスケープに関しては以下サイトなどを使用して、掲載したいタグを丸っとコピペすれば変換してくれます。
変換したものを改めてタグで囲ってあげましょう。
以下のようにHTMLがくずれず表示されるはずです！
<html>
<head></head>
<body></body>
</html>表示のカスタマイズ
スタイルの変更
skinパラメータの引数を変えることによってスタイルを指定することができます。
導入時にheadタグ内で読み込ませたjsのリンクにskinパラメータを付与してみましょう。
<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
スキンのサンプルサイト↓
行番号を表示する
行番号は「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>ちなみに、自分は上記だとスマホで行番号が隠れてしまいうまく表示されませんでした。
なので以下のように書き換えて修正しました。
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;
};これで改善されるはずです・・・！
ご紹介は以上となります。
ソースコードがキレイに表示されると見栄えが一層引き立ちますね！
簡単に導入でき、カスタマイズも簡単なGoogle Code Prettifyをぜひ導入してみてはいかがでしょうか。
※今回ご紹介の中で表示されていたソースコードハイライトはワードプレス側のプラグインを使用しているので、見え方は実際と違うのでご注意ください。
