はてなブログでソースコードを表示する方法
はてなブログでコードを表示する方法はいたってシンプルで簡単です。
コードに色付け(シンタックス・ハイライト)することも可能です。
編集モードを確認する。
はてなブログでは「見たままモード」「はてな記法モード」「Markdownモード」の3つの編集モードがあります。
コードを表示するには、「はてな記法モード」か「Markdownモード」に変更してください。
変更方法は、ブログ管理画面内の「設定」→「編集モード」で変更できます。
私は「はてな記法モード」を利用しています。(特に理由はありません。)
はてな記法モードでコードを表示する。
はてな記法モードでコードを表示するには、表示させたいコード部分を>||
と||<
で囲むだけでOKです。
<h1>うさぎの好きな食べ物</h1> <p>うさぎはニンジンよりも白菜の方が好きです。</p>
と表示されます。
コードに色をつけたい場合(シンタックス・ハイライト)
ハイライトさせたいコードを>>|html|
と||<
で囲むだけでOKです。
<h1>うさぎの好きな食べ物</h1> <p>うさぎはニンジンよりも白菜の方が好きです。</p>
と表示されます。
コードによって、言語モードを変更しないといけません。
htmlの場合>>|html|
cssの場合>>|css|
javascriptの場合>>|javascript|
簡単ですよね!
シンタックス・ハイライトの方が見やすいので、私はシンタックス・ハイライトで表示させようと思っています。