Markdown Preview

Data & Formatting Tool

Markdown Input

Preview

Markdown Syntax

# Heading — heading (use ## for h2, ### for h3)
**bold** and *italic* — text formatting
[text](url) — links
![alt](url) — images
`code` and ```block``` — inline and block code
- item or 1. item — lists
> quote — blockquotes

Copied to clipboard!

lucide.createIcons(); const input = document.getElementById('md-input'); const preview = document.getElementById('md-preview'); function renderMarkdown(text) { if (!text.trim()) return ''; let html = text; // Code blocks html = html.replace(/```(\w*)\n([\s\S]*?)\n```/g, '

$2

'); // Inline code html = html.replace(/`([^`]+)`/g, '$1'); // Headings html = html.replace(/^### (.+)$/gm, '

$1

'); html = html.replace(/^## (.+)$/gm, '

$1

'); html = html.replace(/^# (.+)$/gm, '

$1

'); // Bold & italic html = html.replace(/\*\*(.+?)\*\*/g, '$1'); html = html.replace(/\*(.+?)\*/g, '$1'); // Links html = html.replace(/\[(.+?)\]$(.+?)$/g, '$1'); // Images html = html.replace(/!\[(.*?)\]$(.+?)$/g, '

'); // Unordered lists html = html.replace(/^\s*[-*]\s+(.+)$/gm, '

'); html = html.replace(/(

.*<\/li>\n?)+/g, '

$&'); // Ordered lists html = html.replace(/^\s*\d+\.\s+(.+)$/gm, '

'); html = html.replace(/(

.*<\/li>\n?)+/g, (match) => { if (!match.startsWith('

' + match + '

$1

const lines = html.split('\n'); let result = ''; let inBlock = false; for (const line of lines) { const trimmed = line.trim(); if (trimmed.startsWith(' toast.classList.remove('show'), 2000); }