パーツ番号 02-06-03 ・ CSSのみ

ライトテーマコードブロック

明るい背景で読みやすさを重視したコード表示です。印刷物にも近い配色なのでドキュメント系記事との相性が良好です。

staticcss

プレビュー

ソースコード

HTML

<pre class="d02-06-03-pre"><code><span class="d02-06-03-kw">const</span> user = {
  name: <span class="d02-06-03-str">"Aki"</span>,
  age: <span class="d02-06-03-num">28</span>
};</code></pre>

CSS

.d02-06-03{ background:#fff; }
        .d02-06-03-pre{ width:100%; margin:0; padding:20px; background:#f6f8fa; border:1px solid #e2e5ea; border-radius:6px; font:13px/1.75 Consolas,monospace; color:#24292e; white-space:pre; }
        .d02-06-03-kw{ color:#d73a49; font-weight:700; }
        .d02-06-03-str{ color:#032f62; }
        .d02-06-03-num{ color:#005cc5; }

クラス名 .d02-06-03 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。