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

インデントガイド付きYAML設定ファイル風表示

階層を縦線で示したYAML風の設定ファイル表示です。サーバー設定やCI/CD手順を説明する開発記事に利用できます。

staticcss

プレビュー

ソースコード

HTML

<pre class="d02-06-11-pre"><code><span class="d02-06-11-key">server</span>:
<span class="d02-06-11-guide">│ </span><span class="d02-06-11-key">host</span>: <span class="d02-06-11-str">localhost</span>
<span class="d02-06-11-guide">│ </span><span class="d02-06-11-key">port</span>: <span class="d02-06-11-num">8080</span>
<span class="d02-06-11-key">database</span>:
<span class="d02-06-11-guide">│ </span><span class="d02-06-11-key">name</span>: <span class="d02-06-11-str">app_db</span></code></pre>

CSS

.d02-06-11{ background:#1b1f27; }
        .d02-06-11-pre{ width:100%; margin:0; padding:18px 20px; font:12.5px/1.9 Consolas,monospace; color:#c9d1d9; white-space:pre; }
        .d02-06-11-key{ color:#79c0ff; }
        .d02-06-11-str{ color:#a5d6a7; }
        .d02-06-11-num{ color:#ffab70; }
        .d02-06-11-guide{ color:#3d4451; }

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