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

差分(diff)表示風コードブロック

追加行を緑、削除行を赤の背景で示す差分表示です。変更点を説明するリリースノートや修正解説記事に適しています。

staticcss

プレビュー

ソースコード

HTML

<pre class="d02-06-06-pre"><code><span class="d02-06-06-line d02-06-06-ctx">  function greet() {</span>
<span class="d02-06-06-line d02-06-06-del">-   console.log('hi');</span>
<span class="d02-06-06-line d02-06-06-add">+   console.log('hello');</span>
<span class="d02-06-06-line d02-06-06-ctx">  }</span></code></pre>

CSS

.d02-06-06{ background:#0d1117; }
        .d02-06-06-pre{ width:100%; margin:0; padding:16px 0; font:12.5px/1.9 Consolas,monospace; }
        .d02-06-06-line{ display:block; padding:0 18px; white-space:pre; color:#c9d1d9; }
        .d02-06-06-add{ background:rgba(46,160,67,.25); color:#7ee787; }
        .d02-06-06-del{ background:rgba(248,81,73,.2); color:#ffa198; }
        .d02-06-06-ctx{ color:#8b949e; }

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