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

JSON/データ構造風カラーコード表示

キーと値の種類ごとに色分けしたデータ表示です。APIレスポンスの例を掲載する開発ブログでの利用に向いています。

staticcss

プレビュー

ソースコード

HTML

<pre class="d02-06-10-pre"><code>{
  <span class="d02-06-10-key">"name"</span>: <span class="d02-06-10-str">"Aki"</span>,
  <span class="d02-06-10-key">"age"</span>: <span class="d02-06-10-num">28</span>,
  <span class="d02-06-10-key">"active"</span>: <span class="d02-06-10-bool">true</span>,
  <span class="d02-06-10-key">"tags"</span>: [<span class="d02-06-10-str">"admin"</span>]
}</code></pre>

CSS

.d02-06-10{ background:#282c34; }
        .d02-06-10-pre{ width:100%; margin:0; padding:18px 20px; font:12.5px/1.8 Consolas,monospace; color:#abb2bf; white-space:pre; }
        .d02-06-10-key{ color:#e06c75; }
        .d02-06-10-str{ color:#98c379; }
        .d02-06-10-num{ color:#d19a66; }
        .d02-06-10-bool{ color:#56b6c2; }

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