はてなブログのコードブロックのcssスタイルを変更する

はてなブログのコードブロックのスタイル変更時のメモ。

色などのスタイル変更
言語名の追加

を中心にまとめる。はてなブログの場合、意外に行数表示はCSSだけではタグ構造上無理でJSが必要になりそうなので gistやcodepenみたいなサービスの埋め込み使うのもありかも。

はてなブログにおけるコードブロックのセレクタ

Markdownのコードブロック（``````で囲むやつ）では、実際はpreタグのみ使われており、pre.codeとなっている。こいつのデザインを変えてあげればいい。

/*記事中のcode*/
.entry-content pre.code {
// 新しいデザイン
}

Qiitaっぽいデザインにしてみる

今回はQiitaの黒っぽいコードのデザインにしてみる。

f:id:cartman0:20220205042449p:plain — Qiitaのコードブロックデザイン

参考：Qiita Markdown 書き方まとめ - Qiita

次の色を使うとQiitaっぽくなる。

.entry-content pre.code {
font-size: .8rem;
margin: 1.5rem 0;
padding: 1.5rem 0.5rem;
background-color: #364549;
color: #e3e3e3;
}

言語名の追加

コードブロックに言語名を追加しなかったまたはした場合で、以下のように微妙に属性が変わる。

言語名あり：data-lang="python" のように追加される
言語名なし：data-lang属性はあるが値なし

注意点としてはdata-lang属性が必ず入る。

なので言語名を表示する場合、data-lang属性の値を擬似要素:beforeなどに追加して表示してあげればいい。

今回はQiitaのように、

言語の指定があれば左上に表示し、
指定がなければ何も表示しない

ようなデザインにしてみる。ただし、この場合、単純に表示パターンでデザインすると値なしの場合に空文字を出力してデザイン崩れを起こす．なので、セレクタで分けて2通りにする必要がある。

pre.code[data-lang=""]: 言語指定なし
pre.code:not([data-lang=""]): 何かしらの言語指定がある

今回は言語指定なしの場合、何も表示しないので前者は使わない。 Qiitaっぽくやると次のようになる。

  /*言語名表示*/
  .entry-content pre.code:not([data-lang=""]) {
  padding: 2.3rem 0.5rem 1.5rem;
  }
  .entry-content pre.code:not([data-lang=""]):before {
      content: attr(data-lang);
      display: inline-block;
      color: #eee;
      background-color: #777;
      padding: 2px 4px;
      position: absolute;
      transform: translateY(-2.3rem);
      word-break: break-all;
  }