はてなブログのコードブロックをいい感じにした

はてなブログのデフォルトのコードブロックは字も大きいし、長い行は折り返されるし、なんだか見にくい。
素敵なテーマはたくさんあってもコードブロックのせいで台無しな気がしませんか？テーマによっては簡単に調整されているものも確かにありますが、あくまでもおまけ程度のデザイン。ずっと気になっていたのでデザインを調整しました。以下そのまとめです。
沢山の方がすでに色々な記事を書いてくれていますので、それらを参考に組み上げて行きました。以下その記事たちを紹介します。

デザインの変化

先にコードブロックの変化を載せておきます。

元のデザイン

テーマ作成者によって背景色などは設定されているようです。

highlight.jsを適用した状態

参考のコードが変わっていてすみません。普通に間違えました。。
文字色が変更されましたが、背景が変わっていません。行間がとても広くなってしまいました。

cssを調整

こちらは現在の状態です。

シンタックスハイライトにhighlight.jsを使用する

www.limosuki.com

行番号を表示する

code-life.hatenablog.com

折り返しを無効にする

www.taneyats.com

言語名の表示

susisu.hatenablog.com

ダブルクリックで全選択

上の言語名の表示と同じ方です

susisu.hatenablog.com

組み合わせて以下のようになりました。
変更したのは主にデザインの面です。

• 行ごとに背景色を変える設定を削除
• 言語の表示ラベルをホバーでふんわり消えるようtransitionを使用
• highlight.jsを読み込んでも背景色までは変わらなかったので以下のように付け加えた

 pre.code {
     background: #3f3f3f;     
 }

以下のような感じです。長い行は折り返されます。

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Noto+Sans+JP:wght@400;700;900&display=swap');

.red-bg {
  background-color: red;
}

.blue-bg {
  background-color: blue;
}

.yellow-bg {
  background-color: yellow;
}

.green-bg {
  background-color: green;
}

.black-bg {
  background-color: black;
}

ひとつ、問題点というほどではないですが、はてなブログとhighlight.jsの対応している言語の差で、ハイライトのカラーがはてなブログのデフォルトになってしまうものがでてきてしまうこと。
具体的にはこれまではてなブログに投稿するときはscssをsassで指定していたのですが、ハイライトのカラーがはてなブログのデフォルトカラーのままになってしまっていました。
highlight.jsを使用するならscssでよさそうです。
記事を書く時は一度マークダウンエディタで書いたものをコピペして修正、投稿していたので私としてはむしろ使い勝手がよくなったかもしれません。