Markdown Editor
A practical Svelte example: Build a markdown editor with live preview and syntax highlighting
What You'll Learn
- Real-time text binding with bind:value
- Markdown parsing and rendering
- Split pane layout implementation
- Syntax highlighting
- Local storage integration
Project Structure
markdown-editor/ ├── src/ │ ├── lib/ │ │ ├── Editor.svelte │ │ ├── Preview.svelte │ │ ├── Toolbar.svelte │ │ └── SplitPane.svelte │ ├── utils/ │ │ ├── markdown.js │ │ └── storage.js │ └── App.svelte ├── public/ │ ├── themes/ │ └── index.html └── package.json
Key Features
- Live preview as you type
- Markdown syntax highlighting
- Resizable split panes
- Common markdown shortcuts
- Auto-save functionality
- Export to HTML/PDF