/* Add these to your existing style block */ pre { @apply bg-gray-800 text-gray-100 p-4 rounded-lg overflow-x-auto my-3; } code { @apply bg-gray-100 text-gray-800 px-1 py-0.5 rounded text-sm font-mono; } blockquote { @apply border-l-4 border-primary/50 pl-4 py-2 my-3 bg-primary/5 italic; } ul { @apply list-disc pl-5 my-3; } li { @apply my-1; } h1 { @apply text-2xl font-bold mt-4 mb-2; } h2 { @apply text-xl font-bold mt-4 mb-2; } h3 { @apply text-lg font-bold mt-3 mb-2; } a { @apply text-primary hover:underline; } hr { @apply my-6 border-t border-gray-300; }

Markdown to HTML Converter

Convert Markdown text to HTML quickly and easily. Supports headings, lists, links, and more.

Markdown Input

0 characters

HTML Output

HTML preview will appear here...

Lines: 0 | Tags: 0

0 bytes

Conversion Options

Allow raw HTML in Markdown

Auto-convert URLs to links

Sanitize HTML output

Markdown Quick Reference

Headings

# H1 → <h1>

## H2 → <h2>

### H3 → <h3>

Text Formatting

**bold** → <strong>

*italic* → <em>

`code` → <code>

Lists & Links

- Item → <li>

[Text](URL) → <a>

![Alt](URL) → <img>

// Markdown Converter Elements const markdownInput = document.getElementById('markdown-input'); const htmlPreview = document.getElementById('html-preview'); const htmlOutput = document.getElementById('html-output'); const convertMdBtn = document.getElementById('convert-md'); const copyHtmlBtn = document.getElementById('copy-html'); const downloadHtmlBtn = document.getElementById('download-html'); const clearMdBtn = document.getElementById('clear-md'); const exampleMdBtn = document.getElementById('example-md'); const copyAllBtn = document.getElementById('copy-all'); const resetMdBtn = document.getElementById('reset-md'); const formatBtns = document.querySelectorAll('.format-btn'); const charCount = document.getElementById('char-count'); const lineCount = document.getElementById('line-count'); const tagCount = document.getElementById('tag-count'); const outputSize = document.getElementById('output-size'); const editModeBtn = document.getElementById('edit-mode'); const previewModeBtn = document.getElementById('preview-mode'); const splitModeBtn = document.getElementById('split-mode'); const editorContainer = document.getElementById('editor-container'); const allowHtmlCheck = document.getElementById('allow-html'); const autoLinksCheck = document.getElementById('auto-links'); const sanitizeHtmlCheck = document.getElementById('sanitize-html'); // Example Markdown content const exampleMarkdown = `# Welcome to Markdown Converter ## Quick Start Guide This tool converts **Markdown** to *HTML* instantly. ### Features: - **Easy to use** - Just type and convert - **Live preview** - See HTML output in real-time - **Formatting tools** - Quick buttons for common formatting - **Export options** - Copy or download HTML ### Code Example: \`\`\`javascript // Simple function example function convertMarkdown(md) { return marked.parse(md); } \`\`\` ### Useful Links: - [Markdown Guide](https://www.markdownguide.org/) - [HTML Reference](https://developer.mozilla.org/en-US/docs/Web/HTML) > **Note:** This is a simple converter for quick HTML generation. > For complex documents, consider dedicated Markdown editors. --- **Enjoy converting!**`; // View modes let currentViewMode = 'split'; // 'edit', 'preview', or 'split' // Initialize Markdown converter function initMarkdownConverter() { // Set up event listeners convertMdBtn.addEventListener('click', convertMarkdown); copyHtmlBtn.addEventListener('click', copyHtml); downloadHtmlBtn.addEventListener('click', downloadHtml); clearMdBtn.addEventListener('click', clearMarkdown); exampleMdBtn.addEventListener('click', loadExample); copyAllBtn.addEventListener('click', copyAll); resetMdBtn.addEventListener('click', resetConverter); // Formatting buttons formatBtns.forEach(btn => { btn.addEventListener('click', function() { insertFormatting(this.dataset.format); }); }); // View mode buttons editModeBtn.addEventListener('click', () => setViewMode('edit')); previewModeBtn.addEventListener('click', () => setViewMode('preview')); splitModeBtn.addEventListener('click', () => setViewMode('split')); // Real-time conversion on input (with debounce) let timeout; markdownInput.addEventListener('input', function() { clearTimeout(timeout); timeout = setTimeout(() => { updateCharCount(); if (currentViewMode !== 'edit') { convertMarkdown(); } }, 500); }); // Load example on first visit if (!localStorage.getItem('mdConverterVisited')) { setTimeout(loadExample, 1000); localStorage.setItem('mdConverterVisited', 'true'); } // Initialize counts updateCharCount(); } // Simple Markdown to HTML converter (lightweight) function convertMarkdown() { let mdText = markdownInput.value.trim(); if (!mdText) { htmlPreview.innerHTML = '

Enter Markdown text to see HTML preview...

'; htmlOutput.value = ''; updateOutputStats(''); return; } // Convert Markdown to HTML let html = simpleMarkdownToHtml(mdText); // Update preview and output htmlPreview.innerHTML = html; htmlOutput.value = html; // Update statistics updateOutputStats(html); } // Simple Markdown parser (lightweight alternative to full library) function simpleMarkdownToHtml(markdown) { let html = markdown; // Headers html = html.replace(/^### (.*$)/gim, '

$1

'); html = html.replace(/^## (.*$)/gim, '

$1

'); html = html.replace(/^# (.*$)/gim, '

$1

'); // Bold html = html.replace(/\*\*(.*?)\*\*/gim, '$1'); html = html.replace(/__(.*?)__/gim, '$1'); // Italic html = html.replace(/\*(.*?)\*/gim, '$1'); html = html.replace(/_(.*?)_/gim, '$1'); // Line breaks html = html.replace(/\n/gim, '
'); // Links (if auto-links is enabled) if (autoLinksCheck.checked) { html = html.replace(/\[([^\]]+)\]$([^)]+)$/gim, '$1'); } // Code blocks html = html.replace(/```([\s\S]*?)```/gim, '

$1

'); html = html.replace(/`([^`]+)`/gim, '$1'); // Blockquotes html = html.replace(/^> (.*$)/gim, '

$1

'); // Lists html = html.replace(/^\s*-\s+(.*$)/gim, '

'); html = html.replace(/^\s*\*\s+(.*$)/gim, '

'); // Wrap list items in ul tags if (html.includes('

')) { html = html.replace(/(

.*<\/li>)/gim, '

$1'); } // Horizontal rule html = html.replace(/^---$/gim, '

'); // Auto-link URLs (if enabled) if (autoLinksCheck.checked) { const urlRegex = /(https?:\/\/[^\s]+)/g; html = html.replace(urlRegex, '$1'); } // Allow raw HTML if checkbox is checked if (!allowHtmlCheck.checked) { html = html.replace(//g, '>'); } // Sanitize HTML if checkbox is checked if (sanitizeHtmlCheck.checked) { html = sanitizeHtml(html); } return html; } // Basic HTML sanitization function sanitizeHtml(html) { // Remove potentially dangerous tags const dangerousTags = /<(script|iframe|object|embed|form|input|button)[^>]*>.*?<\/\1>/gim; html = html.replace(dangerousTags, ''); // Remove dangerous attributes html = html.replace(/ on\w+="[^"]*"/gim, ''); html = html.replace(/ javascript:/gim, ''); return html; } // Insert formatting at cursor position function insertFormatting(format) { const textarea = markdownInput; const start = textarea.selectionStart; const end = textarea.selectionEnd; const selectedText = textarea.value.substring(start, end); const before = textarea.value.substring(0, start); const after = textarea.value.substring(end); let formattedText; if (selectedText) { // Wrap selected text switch(format) { case '# Heading': formattedText = `# ${selectedText}`; break; case '## Heading': formattedText = `## ${selectedText}`; break; case '**bold**': formattedText = `**${selectedText}**`; break; case '*italic*': formattedText = `*${selectedText}*`; break; case '[Link](url)': formattedText = `[${selectedText}](url)`; break; case '- List item': formattedText = `- ${selectedText}`; break; case '> Blockquote': formattedText = `> ${selectedText}`; break; case '`code`': formattedText = `\`${selectedText}\``; break; default: formattedText = selectedText; } } else { // Insert format template formattedText = format; } textarea.value = before + formattedText + after; textarea.focus(); textarea.selectionStart = textarea.selectionEnd = start + formattedText.length; // Trigger conversion convertMarkdown(); updateCharCount(); } // Copy HTML to clipboard function copyHtml() { if (htmlOutput.value) { copyToClipboard(htmlOutput.value).then(() => { showNotification('HTML copied to clipboard!'); }).catch(err => { showNotification('Failed to copy: ' + err.message); }); } } // Download HTML as file function downloadHtml() { if (!htmlOutput.value) return; const blob = new Blob([htmlOutput.value], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'converted-markdown.html'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); showNotification('HTML file downloaded!'); } // Clear Markdown input function clearMarkdown() { markdownInput.value = ''; htmlPreview.innerHTML = '

Enter Markdown text to see HTML preview...

'; htmlOutput.value = ''; updateCharCount(); updateOutputStats(''); markdownInput.focus(); } // Load example Markdown function loadExample() { markdownInput.value = exampleMarkdown; convertMarkdown(); updateCharCount(); showNotification('Example Markdown loaded!'); } // Copy both Markdown and HTML function copyAll() { const text = `Markdown:\n${markdownInput.value}\n\nHTML:\n${htmlOutput.value}`; copyToClipboard(text).then(() => { showNotification('Markdown and HTML copied!'); }).catch(err => { showNotification('Failed to copy: ' + err.message); }); } // Reset converter to initial state function resetConverter() { clearMarkdown(); allowHtmlCheck.checked = true; autoLinksCheck.checked = true; sanitizeHtmlCheck.checked = false; setViewMode('split'); showNotification('Converter reset!'); } // Update character count function updateCharCount() { const count = markdownInput.value.length; charCount.textContent = count.toLocaleString(); // Update line count const lines = markdownInput.value.split('\n').length; lineCount.textContent = lines; } // Update output statistics function updateOutputStats(html) { // Count HTML tags const tagMatches = html.match(/<\/?[a-z][\s\S]*?>/gi) || []; tagCount.textContent = tagMatches.length; // Calculate size const size = new Blob([html]).size; outputSize.textContent = size.toLocaleString(); } // Set view mode (edit, preview, split) function setViewMode(mode) { currentViewMode = mode; // Reset all buttons editModeBtn.classList.remove('bg-accent', 'text-primary'); previewModeBtn.classList.remove('bg-accent', 'text-primary'); splitModeBtn.classList.remove('bg-accent', 'text-primary'); editModeBtn.classList.add('text-gray-700', 'hover:bg-gray-200'); previewModeBtn.classList.add('text-gray-700', 'hover:bg-gray-200'); splitModeBtn.classList.add('text-gray-700', 'hover:bg-gray-200'); // Update UI based on mode switch(mode) { case 'edit': editorContainer.classList.remove('lg:grid-cols-2'); editorContainer.classList.add('lg:grid-cols-1'); document.querySelector('div.h-full:last-child').classList.add('hidden'); editModeBtn.classList.remove('text-gray-700', 'hover:bg-gray-200'); editModeBtn.classList.add('bg-accent', 'text-primary'); break; case 'preview': editorContainer.classList.remove('lg:grid-cols-2'); editorContainer.classList.add('lg:grid-cols-1'); document.querySelector('div.h-full:first-child').classList.add('hidden'); document.querySelector('div.h-full:last-child').classList.remove('hidden'); previewModeBtn.classList.remove('text-gray-700', 'hover:bg-gray-200'); previewModeBtn.classList.add('bg-accent', 'text-primary'); // Convert if we haven't already if (markdownInput.value && !htmlOutput.value) { convertMarkdown(); } break; case 'split': editorContainer.classList.remove('lg:grid-cols-1'); editorContainer.classList.add('lg:grid-cols-2'); document.querySelectorAll('div.h-full').forEach(el => el.classList.remove('hidden')); splitModeBtn.classList.remove('text-gray-700', 'hover:bg-gray-200'); splitModeBtn.classList.add('bg-accent', 'text-primary'); break; } } // Initialize when DOM is loaded document.addEventListener('DOMContentLoaded', function() { initMarkdownConverter(); setViewMode('split'); // Default to split view });

More SEO Tools Tools

Multilingual URL Opener

Multilingual URL Opener, Batch Language URLs, Translated Pages Opener, i18n URL Tool

Automatically generate and open multiple language versions of your web pages with custom delay settings. Perfect for multilingual website management.

Try Converter

Multiple URL Opener

Multiple URL Opener, Open Multiple Links, Batch URL Opener, URL Scheduler

Open multiple URLs automatically with custom delay and batch settings. Manage your link opening history and control the process with our powerful URL opener tool.

Try Converter

Multilingual URL Opener for Transposh

Multilingual URL Opener, Batch Language URLs, Translated Pages Opener, i18n URL Tool

Automatically generate and open multiple language versions of your web pages with custom delay settings. Perfect for multilingual website management.

Try Converter

Multilingual URL Opener GTranslate

GTranslate URL Opener, Batch Language URLs, GTranslate Multilingual, i18n URL Tool

Automatically generate and open multiple language versions of your GTranslate web pages with custom delay settings.

Try Converter

yan jiang gao jia pin yin

Pinyin 演讲稿生成器

Try Converter

Markdown to HTML

Try Converter

Tools

SEO Tools

View all SEO Tools tools

Time Tools

View all Time Tools tools

Converter

Calculator

Cost Calculator

View all Cost Calculator tools

Grade Calculator

No tools in this category

View all Grade Calculator tools

Need a Custom Tool or Calculator?

Don't see the tool you need? Let us know via email, and we'll consider adding it.

869241891@qq.com

Markdown to HTML Converter

Conversion Options

Markdown Quick Reference

Headings

Text Formatting

Lists & Links

$1

$1

$1

More SEO Tools Tools

Multilingual URL Opener

Multiple URL Opener

Multilingual URL Opener for Transposh

Multilingual URL Opener GTranslate

yan jiang gao jia pin yin

Markdown to HTML

Tools

SEO Tools

Time Tools

Converter

Area Converter

Currency Converter

Data Storage Converter

Data Transfer Converter

Energy Converter

Force Converter

Frequency Wavelength Converter

Image Converter

Length Converter

Number Converter

Power Converter

Prefixes Converter

Pressure Converter

Speed Converter

Temperature Converter

Time Converter

Typography Converter

Viscosity - Dynamic Converter

Volume Converter

Weight Converter

Calculator

Cost Calculator

Grade Calculator

Need a Custom Tool or Calculator?