はてなブログにプログラムのソースコードを載せる方法（はてな記法）
簡単なのでぜひ試してみてくださいね。
１．編集方法の変更
まず、「記事を書く」を選択します。
はてなブログの記事の編集方法は最初、「見たまま」モードに設定されています。これの変更が必要です。
下図、「編集 見たまま」の右にあるｖをクリックします。
すると、「見たまま」「はてな記法」「Markdown」の３つが表示されます。ここで「はてな記法」を選択します。
すると、次のようなダイアログボックスが表示されます。もしも「見たまま」や「Markdown」で既に文章を作っていた場合は編集方法を変更するタイミングで内容が消えてしまいます。あらかじめ文章をコピーしてテキストファイルなどに避難させておきましょう。その後で「OK」を選択します。
こんなことも聞いてくるかもしれませんが、「このページを離れる」でOKです。
「編集」の横の文字が「見たまま」から「はてな記法」に変わりました。これで編集方法の変更ができました。
２．はてな記法でソースコードを表示
２．１．とりあえずコードを載せる方法
はてな記法では、次のようにして本文中にプログラムのソースコードを載せることができます。
>|| （ここにプログラムのソースコードを貼ります） ||<
>|| と ||< は必ず行の頭にする必要があります。忘れず改行しましょう。
例えば、次のようなコードをはてなブログに載せたいとします。
print "hello, hatena"
この場合、
>|| print "hello, hatena" ||<
と書くことで、ブログには以下のように表示されます。
print "hello, hatena"
２．２．プログラム言語の構文によって色を付ける
２．１．ではとりあえずコードを載せる方法を書きましたが、ここではちょっとした応用として、言語ごとに構文などを色付けて表示させる方法を書きます。
例えば、pythonのソースコードを色付きで表示したい場合は、以下のように書きます。
>|python| print "hello, hatena" ||<
始まりの >|| 部分の、|| の間に載せたい言語を書けば良いということです。
実際にやってみると、こんな感じで色が付きます。
print "hello, hatena"
色付け表示が可能な言語は以下から確認できます。
help.hatenablog.com
おまけ
はてな記法について
いままで見たままモードで編集していた人は、いきなりはてな記法を使うことに躊躇いを感じるかもしれませんが、意外となんとかなります。箇条書きや引用などは見たままモードと同じように使えます。プレビューでの確認作業も変わりません。
加えて言うと、はてな記法ではリアルタイムプレビューという機能があります。これは、編集中に常時更新されるプレビューで、編集画面のすぐ横に表示できます。最後にこれの使い方だけ紹介しておきます。
編集画面の本分右上、四角に囲まれた目のようなアイコンにカーソルを持っていくと、「リアルタイムプレビュー」と表示されます（下図）。これをクリックしましょう。
すると、次のように右半分にリアルタイムプレビューが表示されます。
画像や大文字、中文字などの簡単な確認はこちらでできます。プレビューをいちいち表示するのが面倒、という方には役立つ機能だと思います。
行番号の追加（2017/10/27更新）
はてな記法を使ってソースコードを表示する場合、デフォルトでは行番号の表示がありません。
が、追加する方法はあります。詳しくは下記記事にまとめてあります。よろしければこちらもどうぞ。
nagoyanofes.hatenadiary.jp
