CSSだけじゃないのね・・・はてなブログでコードを埋め込み色分けする

スーパーpre記法（シンタックス・ハイライト）

nandarou.hateblo.jp

このブログでCSSについて書き、コードもコピペしたのですがコピペしただけ綺麗な色分けされた状態で表示されたのですが、どうなっているのだろう？と調べてみました。

はてなダイアリーのヘルプに記載されています。

help.hatenablog.com

な～るほどね。

ただ・・・編集モードが「見たまま」の場合は適用されないので「はてな記法」に変更しないといけません。まずは、編集モードを変更する必要があります。ところが・・・編集途中のブログは適用されないので、編集モードを変更してから改めて書かないといけません。

 >||

 ここにコードを記載

 ||<

こんな感じでコードをそのまま表示できると。

さらに、 「>||」を「>|css|」とすると色分けもしてくれるとか。同じコードで試してみる。

スーパーpre記法で書いてみる

こう書くと

 >||
 /* 見出しのリセット */
 .entry-content h3,
 .entry-content h3::before,
 .entry-content h3::after {
 background: none;
 border: none;
 border-radius: 0;
 }
 ||<

このように表示されます

/* 見出しのリセット */
.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
background: none;
border: none;
border-radius: 0;
}

色分け表示

さらに、コードを色分けしてみる。こう書くと

 >|css|
 /* 見出しのリセット */
 .entry-content h3,
 .entry-content h3::before,
 .entry-content h3::after {
  background: none;
  border: none;
  border-radius: 0;
 }
 ||<

このように表示されます

/* 見出しのリセット */
.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
background: none;
border: none;
border-radius: 0;
}

ここで、色々と試してみたのが「はてな記法」をそのまま表示すること。>||は、自動的に変換されるので表示されない。
でも、表示できています。色々と試してみましたが、ヘルプのこの部分に注目しました。

※「>||」「||<」は必ず行頭になるよう記述してください。

つまり、行頭でなければいいのです。だから、半角の空白を入れています。

>||

そのまま表示できます。頭に半角の空白を入れています。