script.js

const sampleMarkdown = `# Markdown Previewer

Write Markdown on the left and watch the preview update in real time.

## Features

- Live rendering as you type
- Clean split-screen layout
- GitHub Pages friendly static app

### Formatting examples

**Bold text**, *italic text*, and ~~strikethrough~~ all work.

> Blockquotes help call out important notes.

1. Ordered list item
2. Another item
3. Final item

- Unordered list item
- Another bullet

| Syntax | Description |
| --- | --- |
| Header | Title |
| Paragraph | Text |

## Code block

\`\`\`js
const message = "Hello, Markdown!";
console.log(message);
\`\`\`

Visit [GitHub Pages](https://pages.github.com/) to host static apps like this.`;

const editor = document.querySelector('#editor');
const preview = document.querySelector('#preview');
const resetButton = document.querySelector('#reset-button');

marked.setOptions({
  breaks: true,
  gfm: true,
  headerIds: false,
  mangle: false
});

function renderMarkdown() {
  const raw = editor.value;
  preview.innerHTML = marked.parse(raw);
}

editor.value = sampleMarkdown;
renderMarkdown();
editor.addEventListener('input', renderMarkdown);
resetButton.addEventListener('click', () => {
  editor.value = sampleMarkdown;
  renderMarkdown();
  editor.focus();
});