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

ダークテーマコードブロック

暗い背景に行番号付きでコードを表示する定番スタイルです。WordPressの技術ブログでサンプルコードを掲載する際に使えます。

staticcss

プレビュー

ソースコード

HTML

<pre class="d02-06-01-pre"><span class="d02-06-01-ln"><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></span><code class="d02-06-01-code"><span class="d02-06-01-kw">function</span> <span class="d02-06-01-fn">sum</span>(a, b) {
  <span class="d02-06-01-kw">return</span> a + b;
}

<span class="d02-06-01-cm">// call it</span></code></pre>

CSS

.d02-06-01{ background:#1e1e2e; padding:0; }
        .d02-06-01-pre{ display:flex; width:100%; height:100%; margin:0; font:13px/1.7 "SFMono-Regular",Consolas,monospace; overflow:hidden; }
        .d02-06-01-ln{ display:flex; flex-direction:column; padding:20px 12px; background:#181825; color:#585b70; text-align:right; user-select:none; }
        .d02-06-01-ln span{ display:block; }
        .d02-06-01-code{ padding:20px 18px; color:#cdd6f4; white-space:pre; overflow:hidden; }
        .d02-06-01-kw{ color:#cba6f7; }
        .d02-06-01-fn{ color:#89b4fa; }
        .d02-06-01-cm{ color:#6c7086; font-style:italic; }

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