GGRKS!

覚えきれないことはブログに書け!備忘録です。

はてなブログでソースコードを表示する方法

はてなブログでコードを表示する方法はいたってシンプルで簡単です。
コードに色付け(シンタックス・ハイライト)することも可能です。

編集モードを確認する。

はてなブログでは「見たままモード」「はてな記法モード」「Markdownモード」の3つの編集モードがあります。
コードを表示するには、「はてな記法モード」か「Markdownモード」に変更してください。
変更方法は、ブログ管理画面内の「設定」→「編集モード」で変更できます。
私は「はてな記法モード」を利用しています。(特に理由はありません。)

はてな記法モードでコードを表示する。

はてな記法モードでコードを表示するには、表示させたいコード部分を>||||<で囲むだけでOKです。

<h1>うさぎの好きな食べ物</h1>
<p>うさぎはニンジンよりも白菜の方が好きです。</p>

と表示されます。

コードに色をつけたい場合(シンタックス・ハイライト)

ハイライトさせたいコードを>>|html|||<で囲むだけでOKです。

<h1>うさぎの好きな食べ物</h1>
<p>うさぎはニンジンよりも白菜の方が好きです。</p>

と表示されます。

コードによって、言語モードを変更しないといけません。
htmlの場合>>|html|
cssの場合>>|css|
javascriptの場合>>|javascript|
簡単ですよね!
シンタックス・ハイライトの方が見やすいので、私はシンタックス・ハイライトで表示させようと思っています。