はてなブログでソースコードを表示する(Google Code Prettify)。

はてなブログでGoogle code prettify(ソースコード表示ライブラリ)使えるんじゃねと思い、いろいろ試行錯誤してたらできた。

public static void main(String[] args){
  System.out.println("hello ,world");
}

こんな感じ。

ではやり方を説明していく。

まず管理画面から、デザイン -> カスタマイズ -> ヘッダ -> タイトル下のところに以下を書き込む。

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<script>
prettyPrint();
</script>

これでGoogle Code Prettifyが使えるようになる。

早速試してみよう。

<pre class="prettyprint lang-ソースコードの言語 linenums">
  //ソースコード
</pre>

これでソースコードは表示できるが、若干味気ないのでテーマを追加する。

ここからテーマを選び、.cssをクリックして出てきたコードをコピーする。

そして、先ほどの管理画面 -> デザイン -> カスタマイズ -> ヘッダ -> タイトル下のところに

<style>
  //先ほどコピーしたコード
</style>

と書き込む。

すると、ソースコードのテーマが変更される。

参考にしたサイト様