Membuat Markdown Previewer Editor Real-Time

Dipublikasikan: Juli 2026

Markdown previewer adalah web app yang sangat berguna bagi penulis dan developer. Tutorial ini membuat editor markdown dengan pratinjau real-time, tanpa library eksternal.

Fitur

Teks area untuk menulis markdown
Pratinjau real-time di sebelah kanan
Support heading, bold, list, link, code
Bisa copy hasil HTML

Kode Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Markdown Previewer</title>
  <style>
    * { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:'Segoe UI',Arial,sans-serif; background:#f0f2f5; min-height:100vh; padding:20px; }
    .container { max-width:1200px; margin:0 auto; }
    h1 { text-align:center; color:#2d3436; margin-bottom:20px; }
    .editor-wrapper { display:grid; grid-template-columns:1fr 1fr; gap:20px; min-height:70vh; }
    .panel { display:flex; flex-direction:column; }
    .panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
    .panel-header h2 { font-size:16px; color:#636e72; }
    .panel-header button { padding:6px 14px; border:none; border-radius:6px; cursor:pointer; font-size:12px; }
    .panel-header .copy-btn { background:#6c5ce7; color:#fff; }
    .panel-header .copy-btn:hover { background:#5b4bd6; }
    textarea { width:100%; flex:1; padding:18px; border:2px solid #dfe6e9; border-radius:14px; font-size:15px; font-family:monospace; resize:none; }
    textarea:focus { outline:none; border-color:#6c5ce7; }
    .preview { background:#fff; flex:1; padding:20px; border-radius:14px; border:2px solid #dfe6e9; overflow-y:auto; }
    .preview h1 { font-size:28px; margin-bottom:10px; }
    .preview h2 { font-size:22px; margin-bottom:8px; margin-top:20px; }
    .preview h3 { font-size:18px; margin-bottom:6px; margin-top:15px; }
    .preview p { line-height:1.8; margin-bottom:12px; }
    .preview strong { font-weight:700; }
    .preview em { font-style:italic; }
    .preview ul, .preview ol { padding-left:25px; margin-bottom:12px; }
    .preview li { line-height:1.8; }
    .preview code { background:#f0f0f0; padding:2px 6px; border-radius:4px; font-family:monospace; font-size:14px; }
    .preview pre { background:#2d3436; color:#fff; padding:16px; border-radius:10px; overflow-x:auto; margin-bottom:15px; }
    .preview pre code { background:transparent; color:#fff; padding:0; }
    .preview blockquote { border-left:4px solid #6c5ce7; padding-left:16px; margin:15px 0; color:#636e72; font-style:italic; }
    .preview a { color:#6c5ce7; }
    .preview img { max-width:100%; border-radius:8px; margin:10px 0; }
    .preview hr { border:none; border-top:2px solid #dfe6e9; margin:20px 0; }
  </style>
</head>
<body>
  <div class="container">
    <h1>ðŸ“ Markdown Previewer</h1>
    <div class="editor-wrapper">
      <div class="panel">
        <div class="panel-header"><h2>âœï¸ Editor</h2></div>
        <textarea id="editor" oninput="updatePreview()"># Selamat Datang di Markdown Previewer
## Editor Real-Time

Ini adalah **teks tebal** dan *teks miring*.

### Daftar:
- Item pertama
- Item kedua
- Item ketiga

### Kode:
\`\`\`
function halo() {
  console.log("Hello World!");
}
\`\`\`

### Kutipan:
> Ini adalah blockquote.

[Kunjungi Google](https://google.com)</textarea>
      </div>
      <div class="panel">
        <div class="panel-header"><h2>ðŸ‘ï¸ Pratinjau</h2><button class="copy-btn" onclick="copyHTML()">Copy HTML</button></div>
        <div class="preview" id="preview"></div>
      </div>
    </div>
  </div>
  <script>
    function parseMarkdown(md) {
      let html = md
        .replace(/</g,'&lt;').replace(/>/g,'&gt;')
        .replace(/^### (.+)$/gm, '<h3>$1</h3>')
        .replace(/^## (.+)$/gm, '<h2>$1</h2>')
        .replace(/^# (.+)$/gm, '<h1>$1</h1>')
        .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
        .replace(/\*(.+?)\*/g, '<em>$1</em>')
        .replace(/`{3}([\s\S]*?)`{3}/g, '<pre><code>$1</code></pre>')
        .replace(/`(.+?)`/g, '<code>$1</code>')
        .replace(/^- (.+)$/gm, '<li>$1</li>')
        .replace(/(<li>.*<\/li>(\s|<li>.*<\/li>)*)/g, '<ul>$1</ul>')
        .replace(/^> (.+)$/gm, '<blockquote>$1</blockquote>')
        .replace(/\[(.+?)\]\((.+?)\)/g, '<a href="$2">$1</a>')
        .replace(/^---$/gm, '<hr/>')
        .replace(/^(?!<[hul]|$)/gm, '<p>').replace(/<p>(\s*)$/gm, '</p>')
        .replace(/<p><\/p>/g, '');
      // Wrap consecutive <li> in <ul>
      html = html.replace(/(<li>.*?<\/li>(?:\s*<li>.*?<\/li>)*)/g, '<ul>$1</ul>');
      return html;
    }
    function updatePreview() {
      const md = document.getElementById('editor').value;
      document.getElementById('preview').innerHTML = parseMarkdown(md);
    }
    function copyHTML() {
      const html = document.getElementById('preview').innerHTML;
      navigator.clipboard.writeText(html);
      alert('HTML pratinjau disalin!');
    }
    updatePreview();
  </script>
</body>
</html>