Google code prettifyをはてなブログで使う方法【CDN】
技術系のブログではコードを書くことが多いと思います。そこで便利なのがsyntaxhighlighterです。自動でコードを識別して色分けをしてくれます。
しかしサーバーにアップロードする必要がある以上、はてなブログなどの無料ブログでは使えません。そこで使えるのがGoogle code prettifyです。サーバーにアップロードしなくても<head>内にコードを書くだけで導入できます。
そこで今回ははてなブログでGoogle code prettifyを使う方法を紹介します。今回紹介するGoogle code prettifyははてなブログのために作られたのではなく多くのブログで使われているので、はてなブログ以外の人も参考にしてみてください。
今回のGoogle code prettifyの導入ではCDNを使います。詳しくは下の記事をどうぞ。
Google code prettifyを読み込ませる
<script>タグでGoogle code prettifyを読み込ませる必要があります。
そのため
ダッシュボード→デザイン→カスタマイズ→フッター
に下記のコードを記述します。
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"></script>
HEADに読み込ませる
次に
ヘッダー→タイトル下
もしくは
設定→詳細設定→headに要素を追加
に下記のコードを記述します。記述する場所を２つ書きましたが、どちらでも大丈夫です。使い分けとしては、下のとおりです。僕の場合は<head>に書いています。これで導入の準備は終わりです。
<script>prettyPrint();</script>
- タイトル下→安定性重視
- <head>→速度重視
実際にコードを書く
Google code prettifyを使うにはHTML編集モードにする必要があります。はてな記法などでは編集できないので注意してください。
HTML編集モードにしたら、あとは好きな場所にコードを記述するだけです。レスポンシブ対応なので、スマホでもきれいに見れます。
<pre class="prettyprint">
<p>//ここにコードを記述</p>
</pre>行番号をつけたい場合はlinenumsをpretttyprintのあとに付けます。
<pre class="prettyprint linenums">
//ここにコードを記述
<p>"test"</p>
//ここにコードを記述
<p>"test"</p>
//ここにコードを記述
<p>"test"</p>
//ここにコードを記述
<p>"test"</p>
//ここにコードを記述
<p>"test"</p>
</pre> 注意点として、コードを書く際に「＜」や「＞」などは普通の文字では正しく表示されません。そこで使うのがエスケープ文字です。詳しくは下の記事をどうぞ。
