ブログでなんかのコードを見やすく載せたいときありますよね。

そんなとき使うのがシンタックスハイライターです。

シンタックスハイライターを使うとhtmlやCSSなどのコードをブログに見やすく埋め込むことができます。

そこで今回は一番手軽に使えるシンタックスハイライターを紹介します。
コピペしてすぐに使えるにまとめました。

Google Code Prettify

Google Code PrettifyとはGoogleが提供しているシンタックスハイライターの1つです。
これが一番手軽に使えると感じています。
コードもめちゃくちゃ短く済みます。

方法を以下に示します。


まず以下のコードをhtmlの適当なところに書きます。 
Bloggerだったらhtmlビューにしてからどこでもいいのでそこへコピペしてください。
これは一か所書けば問題ないです。

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst">
  </script>
そのあとコードを書きたい部分は以下のように書いてください。

  
<pre class="prettyprint">ここにコードを書く
</pre>
これだけです。
コードを書く部分は、htmlビューのまま書くとタグが文字として認識されません。
「<」を書くなら「&lt;」のように書かなければタグとして認識されてしまいます。
しかしいちいち書くのは面倒くさいのでおすすめの方法を示します。

  1. 上のコードをhtmlビューでコピペする
  2. 作成ビューに戻して「ここにコードを書く」の部分を選択する
  3. 埋め込みたいコードをそこへコピーする

こうすることでBloggerの方が勝手にタグを文字に変換してくれます。



まとめ

この方法は
のサイトを参考にしました。
このサイトすごくわかりやすいのですがコードにおいて「"」が「”」になっていてコピペですぐ使えなかったんですよね。

そのため自分ですぐに使えるように改めてまとめてみました。
Bloggerの利用者は是非使ってみてくださいね。