プログラムコードブロックにカスタムCSSを適用する

コードブロックを黒い画面風にしてみました。

CSSを以下のように設定します。

pre > code {
font-family: monospace;
padding: 10px 15px;
box-sizing: border-box;
display: block;
background: #1f1f1f;
color: #fafafa;
overflow: auto;
white-space: pre
}

コードが長くなってもスライダーが出るようにしてあります。

replaceallfast "target=\"_blank\"", "", nocasesense;
replaceallfast "<a href=\"(?!#).*?\"", "\\0 target=\"_blank\"", regular, nocasesense;

この前に作った秀丸用のマクロです。
これでプログラミングコードを気軽に書けるようになりました。

あとはシンタックスハイライトだけが気になります。

追記：

文字が大きくなり過ぎていたので修正しました。

line-height: 1.3;
font-size: 1.5rem;

を削除しました。