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

Markdown原文とプレビューの左右比較表示

記法とレンダリング結果を左右に並べて見せる比較表示です。Markdown記法の解説記事やヘルプページに利用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d02-06-12-box">
          <div class="d02-06-12-src">
            <span class="d02-06-12-label">Markdown</span>
            <pre><code># 見出し

**重要**な項目です。</code></pre>
          </div>
          <div class="d02-06-12-out">
            <span class="d02-06-12-label">Preview</span>
            <strong class="d02-06-12-h">見出し</strong>
            <p class="d02-06-12-p"><b>重要</b>な項目です。</p>
          </div>
        </div>

CSS

.d02-06-12{ background:#f4f4f7; }
        .d02-06-12-box{ display:flex; width:100%; max-width:320px; border:1px solid #e2e5ea; border-radius:8px; overflow:hidden; }
        .d02-06-12-src,.d02-06-12-out{ flex:1; padding:12px 14px; }
        .d02-06-12-src{ background:#282c34; }
        .d02-06-12-out{ background:#fff; }
        .d02-06-12-label{ display:block; font-size:9px; letter-spacing:.08em; color:#8a8f98; margin-bottom:8px; }
        .d02-06-12-src pre{ margin:0; font:11px/1.6 Consolas,monospace; color:#abb2bf; white-space:pre-wrap; }
        .d02-06-12-h{ display:block; font-size:14px; color:#222; margin-bottom:6px; }
        .d02-06-12-p{ margin:0; font-size:11px; color:#444; line-height:1.6; }

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