はてなブログにソースコードを貼る5つの方法

はてなブログにソースコードを貼りたい!

技術ブログを書くと、ソースコードをペタペタ貼りたくなる。
手打ちしてるとちょっと見にくいから、きれいに書く方法。




そのまま打った場合

print "Hello world!"

「センタリングすると悪くないんじゃないかな?」なんて思う。

引用を使う

print "Hello world!"

テンプレート依存になるけど、さっと書きたいとき便利でよく使ってる。
ただマウスを当てると引用マークの『"』が出てちょっと恥ずかしい。


html記述する。

print "Hello world!"



見たまま記法で書いているとhtmlを手打ちできるので <code>と</code>でコードを囲う。

こんな感じ↓

f:id:nuakam:20180423105825p:plain

のようにそのまま書ける。
詳しくはhtml5のリファレンス参照。

はてな記法を利用する。

print "Hello world!"

なんと色付けも可能。


やり方は,設定からはてな記法モードに変更する。

f:id:nuakam:20180423105826p:plain


そして編集モード変更。

f:id:nuakam:20180423111729p:plain



見たまま記法で書いた記事を,後からはてな記法に変えることはできないため、書き直すことになる。

>|| と ||< でソースコードを囲む。
>|| に |java| のように言語種類を入れると色付けもしてくれる。

ソースコードを色付けして記述する(シンタックス・ハイライト) - はてなダイアリーのヘルプ


せっかくだからはてな記法を使おうと思う。

おまけ

ほかにもGitHub引用って技もあって、そっちもキレイ!