はてブロの Markdown 記法でコードを綺麗に書く (シンタックスハイライトさせる)

• Atom でコメントをイタリックにしない

上の記事でスタイルシートをこんな風に見せたけど、

.editor, atom-text-editor::shadow {
  .comment {
    font-style: normal;
  }
}

これをやる方法。

Markdown 記法とか知るまでは「どこのブログも似たようなシンタックスハイライトだなぁ、なんか有名なライブラリでもあるんか？(*'▽'*)」とか思ってたけど、便利なものがあるもんだなぁ。

はてブロだからといって特別なことはなくて、Markdown 記法で記事を書くときにこんな風に貼る。コード中の「' (シングルクォート)」は「` (バッククォート)」に書き換えること (うまくコード中にバッククォートをエスケープ表示する方法が分からなかった…)。

'''css
.editor, atom-text-editor::shadow {
  .comment {
    font-style: normal;
  }
}
'''

要はバッククォート3つ同士で囲んだ行が、そのままコード表記になる。改行にはスペース2つを付けなくて良い (pre 要素と同じ)。

そして最初のバッククォート3つの後にある css の記述が重要で、ここにコードの言語名を書くと、自動的にその言語を考慮して表示してくれるというスグレモノ。もっと早く知りたかった。