別冊webメモ

自分用リファレンス&アウトプット

はてなblogでコードを色付き表示したい

「シンタックス・ハイライト」と言うらしいです。

はてな記法モード」に切り替え

f:id:aoicotori:20131118191159j:plain
設定>編集モードで、「見たままモード」から「はてな記法モード」に切り替える。*1


はてな記法ソースコードを書く

ソースコードを「>||」「||<」ではさむとソース表示になります。
行頭の >|| の2本のパイプ( || )の間に言語を指定することで、
シンタックス・ハイライトされます。


こう書くと

>|css|
body {
     color: #000;
     font-family: "メイリオ", Meiryo, sans-serif;
     font-size: 13px;
     line-height: 1.5;
     *font-size: 82%; /* for ie6/7 */
}
 ||<


こうなる

body {
     color: #000;
     font-family: "メイリオ", Meiryo, sans-serif;
     font-size: 13px;
     line-height: 1.5;
     *font-size: 82%; /* for ie6/7 */
}

*1:※一度「見たままモード」で書いた記事は、後から設定を切り替えても「はてな記法モード」にはできないっぽい。