Markdown Mirror

Live preview of common Markdown. Rendered locally with a small built-in parser — headings, emphasis, code, lists, links, quotes, and tables.

# Hello
<p>Some <strong>bold</strong>, some <em>italic</em>, some <code>inline code</code>.</p>
<ul>
<li>List item</li>
<li>Another with a <a href="https://example.com">link</a></li>
</ul>
<blockquote>
<p>A quote</p></blockquote>
<pre tabindex="0"><code>code block
</code></pre><table>
  <thead>
      <tr>
          <th>Col A</th>
          <th>Col B</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>1</td>
          <td>2</td>
      </tr>
  </tbody>
</table>
  <div class="md-preview" id="preview"></div>
</div>
<script>
const esc = s => s.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');

function inline(s) {
  return s
    .replace(/`([^`]+)`/g, (_, c) => `<code>${c}</code>`)
    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
    .replace(/\*([^*]+)\*/g, '<em>$1</em>')
    .replace(/~~([^~]+)~~/g, '<del>$1</del>')
    .replace(/\[([^\]]+)\]$([^)\s]+)$/g, (_, t, u) =>
      /^https?:\/\//.test(u) ? `<a href="${u}" target="_blank" rel="noopener">${t}</a>` : t);
}

function render(md) {
  const lines = esc(md).split('\n');
  let html = '', inCode = false, inList = null, inQuote = false, para = [];

for (let i = 0; i < lines.length; i++) {
    const l = lines[i];

if (l.trim().startsWith('```')) {
      flushPara(); closeList(); closeQuote();
      if (inCode) { html += '</code></pre>'; inCode = false; }
<pre><code>  else { html += '<pre><code>'; inCode = true; }
  continue;
}
if (inCode) { html += l + '\n'; continue; }

// Table: header row followed by separator
if (l.includes('|') && /^\s*\|?[\s:|-]+\|?\s*$/.test(lines[i + 1] || '')) {
  flushPara(); closeList(); closeQuote();
  const cells = r => r.split('|').map(c => c.trim()).filter((c, j, a) => !(j === 0 && c === '') && !(j === a.length - 1 && c === ''));
  html += '<table><tr>' + cells(l).map(c => `<th>${inline(c)}</th>`).join('') + '</tr>';
  i++; // skip separator
  while (i + 1 < lines.length && lines[i + 1].includes('|')) {
    i++;
    html += '<tr>' + cells(lines[i]).map(c => `<td>${inline(c)}</td>`).join('') + '</tr>';
  }
  html += '</table>';
  continue;
}

const h = l.match(/^(#{1,6})\s+(.*)/);
if (h) { flushPara(); closeList(); closeQuote(); html += `<h${h[1].length}>${inline(h[2])}</h${h[1].length}>`; continue; }

if (/^\s*([-*_])\s*\1\s*\1[\s\1]*$/.test(l)) { flushPara(); closeList(); closeQuote(); html += '<hr>'; continue; }

const q = l.match(/^\s*>\s?(.*)/);
if (q) {
  flushPara(); closeList();
  if (!inQuote) { html += '<blockquote>'; inQuote = true; }
  html += inline(q[1]) + ' ';
  continue;
}

if (!l.trim()) { flushPara(); closeList(); closeQuote(); continue; }
closeList(); closeQuote();
para.push(l.trim());
</code></pre>
<p>}
flushPara(); closeList(); closeQuote();
if (inCode) html += ‘</code></pre>’;
return html;
}</p>
<p>const input = document.getElementById(‘input’);
const preview = document.getElementById(‘preview’);
function run() { preview.innerHTML = render(input.value); }
input.addEventListener(‘input’, run);
run();
</script></p>

</div>

</main>
  <footer>
  <p><span class="footer-dot"></span>© 2026 Dillon Webb</p>
  <p id="footer-domain">dillonwebb.org</p>
</footer>
<script>
  document.getElementById('footer-domain').textContent = window.location.hostname;
</script>

</body>
</html>