はてなブログでソースコードを「見やすく」貼り付ける

はてなブログソースコードを貼り付けるときに,これまでは「見たままモード」にそのまま貼り付けてきたので見にくかったので,方法を調べてみた。

kurokinomizuiwa.hatenablog.com

はてな記法」または「Markdown記法」モードで貼り付ける

基本はこちらで,ブログを書く際の記法そのものを変更して行う。記法の違いは,次のブログを参考に。
はてなブログで使うべき“記法”はどれ?h2タグを使いたいなら◯◯記法モード! - たわしの帖
「はてな記法」と「Markdown記法」の比較 - Milkのメモ帳

ちなみに,見たままモードで作成したページをこれらの記法に切り替える方法は次の記述を参考に(自動更新はできず,かなりの力技)。
hatebu-memo.scriptlife.jp

はてな記法ソースコードを貼り付ける

スーパーpre記法を使って、プログラムコードなどの構文を色付け(ハイライト)することができる。

nagoyanofes.hatenadiary.jp

hatenadiary.g.hatena.ne.jp

Markdown記法でソースコードを貼り付ける

バッククォートを3個で囲んだ部分がプレ要素になり,その後ろにプログラミング言語の名前を記述すると シンタックスハイライトが適用される。

hatebu-memo.scriptlife.jp

「見たまま」モードで貼り付ける

この場合も力技で,「見たままモード」で作成中のページとは別に「はてな記法」か「Markdown記法」で作成したコードを貼り付けるみたい。

www.dreamark.tokyo