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

はてなブログで執筆していた頃の記事です。はてなブログにおけるシンタックスハイライトの方法を解説しています。

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

.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 の記述が重要で、ここにコードの言語名を書くと、自動的にその言語を考慮して表示してくれるというスグレモノ。もっと早く知りたかった。