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

行番号+ハイライト行付きコードブロック

特定の行だけ背景色を強調して注目させる表示です。どこを修正すべきか指し示したい設定解説記事に役立ちます。

staticcss

プレビュー

ソースコード

HTML

<pre class="d02-06-09-pre"><span class="d02-06-09-ln"><span>1</span><span class="d02-06-09-hl">2</span><span>3</span></span><code class="d02-06-09-code"><span class="d02-06-09-row">body {</span>
<span class="d02-06-09-row d02-06-09-hlrow">  margin: 0;</span>
<span class="d02-06-09-row">}</span></code></pre>

CSS

.d02-06-09{ background:#1d2027; padding:0; }
        .d02-06-09-pre{ display:flex; width:100%; margin:0; font:13px/2 Consolas,monospace; }
        .d02-06-09-ln{ display:flex; flex-direction:column; padding:18px 10px; color:#565c69; text-align:right; }
        .d02-06-09-ln span{ display:block; padding:0 4px; }
        .d02-06-09-ln .d02-06-09-hl{ color:#1d2027; background:#e5c07b; border-radius:3px; }
        .d02-06-09-code{ flex:1; padding:18px 0; color:#d6d9de; white-space:pre; }
        .d02-06-09-row{ display:block; padding:0 16px; }
        .d02-06-09-hlrow{ background:rgba(229,192,123,.15); border-left:3px solid #e5c07b; padding-left:13px; }

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