# Split-pane markdown

Type on the **left**, read it rendered on the *right* — the two panes stay
scroll-synced as you go, and the raw pane is syntax-highlighted without
pulling in a heavy editor library.

## Why this exists

Most "build a markdown editor" tutorials wire up a textarea and a
`dangerouslySetInnerHTML`, call it done, and skip the two parts that
actually make it feel like a real editor:

1. Highlighting the raw markdown *as you type it* — this uses a
   transparent `<textarea>` stacked on a highlighted `<pre>` backdrop,
   not a whole embedded code-editor dependency.
2. Keeping scroll position lined up between the source and the
   rendered output, in both directions, without a feedback loop where
   each pane keeps re-triggering the other.

## Supported syntax

- **Bold**, *italic*, ~~strikethrough~~, and `inline code`
- [Links](https://example.com) and images
- > Blockquotes
- Ordered and unordered lists
- Fenced code blocks:

```ts
function parseMarkdown(source: string): string {
  // a hand-written parser — no remark, no marked
  return render(source);
}
```

---

Scroll this pane and watch the preview follow along.