きっかけなんて些細なモンですよ。

はてなブログにプログラムのソースコードを載せる方法(はてな記法)

はてなブログにプログラムのソースコードを載せる方法です。

1.編集方法の変更

まず、「記事を書く」を選択します。
はてなブログの記事の編集方法は最初、「見たまま」モードに設定されています。これの変更が必要です。
下図、「編集 見たまま」の右にあるvをクリックします。
f:id:kirintt:20170915010429p:plain

すると、「見たまま」「はてな記法」「Markdown」の3つが表示されます。ここで「はてな記法」を選択します。
f:id:kirintt:20170915010425p:plain

すると、次のようなダイアログボックスが表示されます。「OK」を選択します。
f:id:kirintt:20170915010419p:plain

こんなことも聞いてくるかもしれませんが、「このページを離れる」でOKです。
f:id:kirintt:20170915010432p:plain

「編集」の横の文字が「見たまま」から「はてな記法」に変わりました。これで編集方法の変更ができました。
f:id:kirintt:20170915011625p:plain

2.はてな記法ソースコードを表示

2.1.とりあえずコードを載せる方法

はてな記法では、次のようにして本文中にプログラムのソースコードを載せることができます。

>||
(ここにプログラムのソースコードを貼ります)
||<  

>|| と ||< は必ず行の頭にする必要があります。忘れず改行しましょう。
例えば、次のようなコードをはてなブログに載せたいとします。

print "hello, hatena"

この場合、

>||
print "hello, hatena"
||<  

と書くことで、ブログには以下のように表示されます。

print "hello, hatena"

2.2.プログラム言語の構文によって色を付ける

2.1.ではとりあえずコードを載せる方法を書きましたが、ここではちょっとした応用として、言語ごとに構文などを色付けて表示させる方法を書きます。

例えば、pythonソースコードを色付きで表示したい場合は、以下のように書きます。

>|python|
print "hello, hatena"
||<  

始まりの >|| 部分の、|| の間に載せたい言語を書けば良いということです。
実際にやってみると、こんな感じで色が付きます。

print "hello, hatena"

色付け表示が可能な言語は以下から確認できます。
help.hatenablog.com

おまけ.はてな記法について

いままで見たままモードで編集していた人は、いきなりはてな記法を使うことに躊躇いを感じるかもしれませんが、意外となんとかなります。箇条書きや引用などは見たままモードと同じように使えます。プレビューでの確認作業も変わりません。
加えて言うと、はてな記法ではリアルタイムプレビューという機能があります。これは、編集中に常時更新されるプレビューで、編集画面のすぐ横に表示できます。最後にこれの使い方だけ紹介しておきます。

編集画面の本分右上、四角に囲まれた目のようなアイコンにカーソルを持っていくと、「リアルタイムプレビュー」と表示されます(下図)。これをクリックしましょう。
f:id:kirintt:20170915015138p:plain

すると、次のように右半分にリアルタイムプレビューが表示されます。
f:id:kirintt:20170915015258p:plain

画像や大文字、中文字などの簡単な確認はこちらでできます。プレビューをいちいち表示するのが面倒、という方には役立つ機能だと思います。