はてなブログにソースコードを貼る

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

各種手法

1.そのまま打った場合

print "Hello world!"

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


2.引用を使う

print "Hello world!"

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


3.html記述する。

print "Hello world!"

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

f:id:nuakam:20170923124033p:plain

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


4.はてな記法を利用する。

print "Hello world!"

なんと色付けも可能。

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

:記事中へのソースコードの埋め込み - 駆け出しプログラマの備忘録


そして編集モード変更。

f:id:nuakam:20170923125742p:plain

http://shigekitech.hatenablog.com/entry/2017/02/21/234140


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

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

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


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


はてな記法でインラインコードを書きたい - 8t's BBR