📝 Markdown Previewer

Live GitHub Flavored Markdown editor with syntax highlighting, tables & code blocks

0 chars 0 words 0 lines

\n'; copyToClipboard(html); showToast(i18n.t('toast.copied')); } function downloadMd(){ var blob = new Blob([editor.value], {type:'text/markdown'}); downloadBlob(blob, 'document.md'); } function downloadHtml(){ var html = '\n\n\n\nDocument\n\n \n\n' + preview.innerHTML + '\n \n'; downloadBlob(new Blob([html], {type:'text/html'}), 'document.html'); } function downloadBlob(blob, name){ var a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = name; a.click(); URL.revokeObjectURL(a.href); } /* ============================================================ SCROLL SYNC ============================================================ */ function syncScroll(source, target){ if(syncLock) return; syncLock = true; var ratio = source.scrollTop / Math.max(1, source.scrollHeight - source.clientHeight); target.scrollTop = ratio * Math.max(1, target.scrollHeight - target.clientHeight); syncLock = false; } /* ============================================================ SHARE / TOAST / CLIPBOARD ============================================================ */ var PAGE_URL = 'https://markdown.zaerp.com/'; function share(platform){ var url = encodeURIComponent(PAGE_URL); var text = encodeURIComponent(i18n.t('share.text')); var links = { x: 'https://twitter.com/intent/tweet?text='+text+'&url='+url, fb: 'https://www.facebook.com/sharer/sharer.php?u='+url, wa: 'https://wa.me/?text='+text+' '+url, tg: 'https://t.me/share/url?url='+url+'&text='+text }; window.open(links[platform], '_blank', 'width=600,height=500'); } function copyLink(){ copyToClipboard(PAGE_URL); showToast(i18n.t('toast.linkCopied')); } function copyToClipboard(text){ if(navigator.clipboard){ navigator.clipboard.writeText(text).catch(function(){ fallbackCopy(text); }); } else { fallbackCopy(text); } } function fallbackCopy(text){ var ta = document.createElement('textarea'); ta.value = text; ta.style.position = 'fixed'; ta.style.opacity = '0'; document.body.appendChild(ta); ta.select(); try { document.execCommand('copy'); } catch(e){} document.body.removeChild(ta); } var toastTimer; function showToast(msg){ var el = document.getElementById('toast'); el.textContent = msg; el.classList.add('show'); clearTimeout(toastTimer); toastTimer = setTimeout(function(){ el.classList.remove('show'); }, 2000); } /* ============================================================ SAMPLE MARKDOWN ============================================================ */ var SAMPLE_MD = `# Markdown Previewer Demo Welcome to the **Markdown Previewer**! This tool supports _GitHub Flavored Markdown_. ## Features - ✅ Live preview as you type - ✅ Syntax highlighting in code blocks - ✅ Tables, task lists, blockquotes - ✅ Export to HTML - ✅ Dark / light theme ## Task List - [x] Parse headings - [x] Parse lists - [ ] Parse nested elements - [ ] Add more features ## Code Block \`\`\`javascript function greet(name) { // Returns a greeting return "Hello, " + name + "!"; } console.log(greet("World")); \`\`\` ## Table | Feature | Supported | Notes | |:--------|:---------:|-------| | Headings | ✅ | H1-H6 | | Tables | ✅ | Aligned | | Code | ✅ | Highlighted | ## Inline Formatting You can use **bold**, _italic_, ~~strikethrough~~, and \`inline code\`. ## Blockquote > This is a blockquote. > It can span multiple lines. ## Links & Images [Visit zaerp.com](https://zaerp.com) --- That's it! Start editing on the left. `; /* ============================================================ I18N TRANSLATIONS ============================================================ */ var translations = { en: { 'page.title': 'Markdown Previewer - Live GitHub Flavored Markdown Editor', 'meta.desc': 'Free online Markdown previewer. Live GitHub Flavored Markdown editor with syntax highlighting, tables, task lists, code blocks. Export to HTML. No signup.', 'header.title': '📝 Markdown Previewer', 'header.subtitle': 'Live GitHub Flavored Markdown editor with syntax highlighting, tables & code blocks', 'editor.placeholder': 'Type Markdown here... or click 📝 Sample to load demo', 'btn.sample': '📝 Sample', 'btn.clear': '🗑 Clear', 'btn.copyHtml': '📋 Copy HTML', 'btn.downloadMd': '⬇ .md', 'btn.downloadHtml': '⬇ .html', 'btn.edit': '✏ Edit', 'btn.split': '⬌ Split', 'btn.preview': '👁 Preview', 'stats.chars': 'chars', 'stats.words': 'words', 'stats.lines': 'lines', 'preview.empty': 'Start typing Markdown on the left to see the preview here', 'share.title': 'Share this tool', 'share.copy': 'Copy Link', 'share.text': 'Free Markdown Previewer - live GFM editor with syntax highlighting', 'toast.sample': 'Sample loaded', 'toast.copied': 'HTML copied to clipboard', 'toast.linkCopied': 'Link copied', 'footer': 'Markdown Previewer · Live GitHub Flavored Markdown editor' }, zh: { 'page.title': 'Markdown 预览器 - 实时 GitHub 风格 Markdown 编辑器', 'meta.desc': '免费在线 Markdown 预览器。实时 GitHub 风格 Markdown 编辑器，支持语法高亮、表格、任务列表、代码块。导出 HTML。无需注册。', 'header.title': '📝 Markdown 预览器', 'header.subtitle': '实时 GitHub 风格 Markdown 编辑器，支持语法高亮、表格和代码块', 'editor.placeholder': '在此输入 Markdown... 或点击 📝 加载示例', 'btn.sample': '📝 示例', 'btn.clear': '🗑 清空', 'btn.copyHtml': '📋 复制 HTML', 'btn.downloadMd': '⬇ .md', 'btn.downloadHtml': '⬇ .html', 'btn.edit': '✏ 编辑', 'btn.split': '⬌ 分屏', 'btn.preview': '👁 预览', 'stats.chars': '字符', 'stats.words': '词数', 'stats.lines': '行数', 'preview.empty': '在左侧输入 Markdown，预览将显示在此处', 'share.title': '分享此工具', 'share.copy': '复制链接', 'share.text': '免费 Markdown 预览器 - 实时 GFM 编辑器，支持语法高亮', 'toast.sample': '示例已加载', 'toast.copied': 'HTML 已复制到剪贴板', 'toast.linkCopied': '链接已复制', 'footer': 'Markdown 预览器 · 实时 GitHub 风格 Markdown 编辑器' }, ja: { 'page.title': 'Markdown プレビューアー - ライブ GitHub Flavored Markdown エディター', 'meta.desc': '無料オンライン Markdown プレビューアー。構文ハイライト、テーブル、タスクリスト、コードブロック対応のライブ GFM エディター。HTML エクスポート可能。', 'header.title': '📝 Markdown プレビューアー', 'header.subtitle': '構文ハイライト、テーブル、コードブロック対応のライブ GFM エディター', 'editor.placeholder': 'ここに Markdown を入力... または 📝 をクリックしてサンプルを読み込み', 'btn.sample': '📝 サンプル', 'btn.clear': '🗑 クリア', 'btn.copyHtml': '📋 HTML コピー', 'btn.downloadMd': '⬇ .md', 'btn.downloadHtml': '⬇ .html', 'btn.edit': '✏ 編集', 'btn.split': '⬌ 分割', 'btn.preview': '👁 プレビュー', 'stats.chars': '文字', 'stats.words': '単語', 'stats.lines': '行', 'preview.empty': '左に Markdown を入力するとプレビューが表示されます', 'share.title': 'このツールを共有', 'share.copy': 'リンクコピー', 'share.text': '無料 Markdown プレビューアー - 構文ハイライト対応ライブ GFM エディター', 'toast.sample': 'サンプルを読み込みました', 'toast.copied': 'HTML をコピーしました', 'toast.linkCopied': 'リンクをコピーしました', 'footer': 'Markdown プレビューアー · ライブ GitHub Flavored Markdown エディター' }, ko: { 'page.title': 'Markdown 미리보기 - 실시간 GitHub Flavored Markdown 편집기', 'meta.desc': '무료 온라인 Markdown 미리보기. 구문 강조, 표, 작업 목록, 코드 블록을 지원하는 실시간 GFM 편집기. HTML 내보내기. 가입 불필요.', 'header.title': '📝 Markdown 미리보기', 'header.subtitle': '구문 강조, 표 및 코드 블록을 지원하는 실시간 GitHub Flavored Markdown 편집기', 'editor.placeholder': '여기에 Markdown 입력... 또는 📝 클릭하여 샘플 로드', 'btn.sample': '📝 샘플', 'btn.clear': '🗑 지우기', 'btn.copyHtml': '📋 HTML 복사', 'btn.downloadMd': '⬇ .md', 'btn.downloadHtml': '⬇ .html', 'btn.edit': '✏ 편집', 'btn.split': '⬌ 분할', 'btn.preview': '👁 미리보기', 'stats.chars': '문자', 'stats.words': '단어', 'stats.lines': '줄', 'preview.empty': '왼쪽에 Markdown을 입력하면 미리보기가 여기에 표시됩니다', 'share.title': '이 도구 공유', 'share.copy': '링크 복사', 'share.text': '무료 Markdown 미리보기 - 구문 강조 실시간 GFM 편집기', 'toast.sample': '샘플 로드됨', 'toast.copied': 'HTML이 클립보드에 복사됨', 'toast.linkCopied': '링크 복사됨', 'footer': 'Markdown 미리보기 · 실시간 GitHub Flavored Markdown 편집기' }, fr: { 'page.title': 'Aperçu Markdown - Éditeur GitHub Flavored Markdown en direct', 'meta.desc': 'Aperçu Markdown en ligne gratuit. Éditeur GFM en direct avec coloration syntaxique, tableaux, listes de tâches, blocs de code. Export HTML. Sans inscription.', 'header.title': '📝 Aperçu Markdown', 'header.subtitle': 'Éditeur GitHub Flavored Markdown en direct avec coloration syntaxique, tableaux et blocs de code', 'editor.placeholder': 'Saisissez du Markdown ici... ou cliquez sur 📝 pour charger un exemple', 'btn.sample': '📝 Exemple', 'btn.clear': '🗑 Effacer', 'btn.copyHtml': '📋 Copier HTML', 'btn.downloadMd': '⬇ .md', 'btn.downloadHtml': '⬇ .html', 'btn.edit': '✏ Éditer', 'btn.split': '⬌ Diviser', 'btn.preview': '👁 Aperçu', 'stats.chars': 'caractères', 'stats.words': 'mots', 'stats.lines': 'lignes', 'preview.empty': 'Saisissez du Markdown à gauche pour voir l\'aperçu ici', 'share.title': 'Partager cet outil', 'share.copy': 'Copier le lien', 'share.text': 'Aperçu Markdown gratuit - éditeur GFM en direct avec coloration syntaxique', 'toast.sample': 'Exemple chargé', 'toast.copied': 'HTML copié dans le presse-papiers', 'toast.linkCopied': 'Lien copié', 'footer': 'Aperçu Markdown · Éditeur GitHub Flavored Markdown en direct' }, de: { 'page.title': 'Markdown Vorschau - Live GitHub Flavored Markdown Editor', 'meta.desc': 'Kostenlose Online Markdown Vorschau. Live GFM Editor mit Syntax-Highlighting, Tabellen, Aufgabenlisten, Code-Blöcken. HTML-Export. Keine Anmeldung.', 'header.title': '📝 Markdown Vorschau', 'header.subtitle': 'Live GitHub Flavored Markdown Editor mit Syntax-Highlighting, Tabellen und Code-Blöcken', 'editor.placeholder': 'Markdown hier eingeben... oder 📝 klicken für Beispiel', 'btn.sample': '📝 Beispiel', 'btn.clear': '🗑 Löschen', 'btn.copyHtml': '📋 HTML kopieren', 'btn.downloadMd': '⬇ .md', 'btn.downloadHtml': '⬇ .html', 'btn.edit': '✏ Bearbeiten', 'btn.split': '⬌ Teilen', 'btn.preview': '👁 Vorschau', 'stats.chars': 'Zeichen', 'stats.words': 'Wörter', 'stats.lines': 'Zeilen', 'preview.empty': 'Geben Sie links Markdown ein, um die Vorschau hier zu sehen', 'share.title': 'Dieses Tool teilen', 'share.copy': 'Link kopieren', 'share.text': 'Kostenlose Markdown Vorschau - Live GFM Editor mit Syntax-Highlighting', 'toast.sample': 'Beispiel geladen', 'toast.copied': 'HTML in Zwischenablage kopiert', 'toast.linkCopied': 'Link kopiert', 'footer': 'Markdown Vorschau · Live GitHub Flavored Markdown Editor' }, es: { 'page.title': 'Vista previa de Markdown - Editor GitHub Flavored Markdown en vivo', 'meta.desc': 'Vista previa de Markdown en línea gratis. Editor GFM en vivo con resaltado de sintaxis, tablas, listas de tareas, bloques de código. Exportar HTML. Sin registro.', 'header.title': '📝 Vista previa de Markdown', 'header.subtitle': 'Editor GitHub Flavored Markdown en vivo con resaltado de sintaxis, tablas y bloques de código', 'editor.placeholder': 'Escribe Markdown aquí... o haz clic en 📝 para cargar un ejemplo', 'btn.sample': '📝 Ejemplo', 'btn.clear': '🗑 Limpiar', 'btn.copyHtml': '📋 Copiar HTML', 'btn.downloadMd': '⬇ .md', 'btn.downloadHtml': '⬇ .html', 'btn.edit': '✏ Editar', 'btn.split': '⬌ Dividir', 'btn.preview': '👁 Vista previa', 'stats.chars': 'caracteres', 'stats.words': 'palabras', 'stats.lines': 'líneas', 'preview.empty': 'Escribe Markdown a la izquierda para ver la vista previa aquí', 'share.title': 'Compartir esta herramienta', 'share.copy': 'Copiar enlace', 'share.text': 'Vista previa de Markdown gratis - editor GFM en vivo con resaltado de sintaxis', 'toast.sample': 'Ejemplo cargado', 'toast.copied': 'HTML copiado al portapapeles', 'toast.linkCopied': 'Enlace copiado', 'footer': 'Vista previa de Markdown · Editor GitHub Flavored Markdown en vivo' }, ru: { 'page.title': 'Предпросмотр Markdown - редактор GitHub Flavored Markdown в реальном времени', 'meta.desc': 'Бесплатный онлайн предпросмотр Markdown. Редактор GFM в реальном времени с подсветкой синтаксиса, таблицами, списками задач, блоками кода. Экспорт HTML. Без регистрации.', 'header.title': '📝 Предпросмотр Markdown', 'header.subtitle': 'Редактор GitHub Flavored Markdown в реальном времени с подсветкой синтаксиса, таблицами и блоками кода', 'editor.placeholder': 'Введите Markdown здесь... или нажмите 📝 для загрузки примера', 'btn.sample': '📝 Пример', 'btn.clear': '🗑 Очистить', 'btn.copyHtml': '📋 Копировать HTML', 'btn.downloadMd': '⬇ .md', 'btn.downloadHtml': '⬇ .html', 'btn.edit': '✏ Редактировать', 'btn.split': '⬌ Разделить', 'btn.preview': '👁 Предпросмотр', 'stats.chars': 'символов', 'stats.words': 'слов', 'stats.lines': 'строк', 'preview.empty': 'Введите Markdown слева, чтобы увидеть предпросмотр здесь', 'share.title': 'Поделиться этим инструментом', 'share.copy': 'Копировать ссылку', 'share.text': 'Бесплатный предпросмотр Markdown - редактор GFM с подсветкой синтаксиса', 'toast.sample': 'Пример загружен', 'toast.copied': 'HTML скопирован в буфер обмена', 'toast.linkCopied': 'Ссылка скопирована', 'footer': 'Предпросмотр Markdown · Редактор GitHub Flavored Markdown в реальном времени' } }; /* ============================================================ INIT ============================================================ */ document.addEventListener('DOMContentLoaded', function(){ editor = document.getElementById('editor'); preview = document.getElementById('preview'); previewPane = document.getElementById('previewPane'); // Register translations Object.keys(translations).forEach(function(lang){ i18n.addTranslations(lang, translations[lang]); }); // Load saved content try { var saved = localStorage.getItem(STORAGE_KEY); if(saved){ editor.value = saved; } } catch(e){} // Load theme try { if(localStorage.getItem(THEME_KEY) === 'dark'){ document.body.classList.add('dark'); document.getElementById('themeBtn').textContent = '☀️'; } } catch(e){} // Event listeners editor.addEventListener('input', render); editor.addEventListener('scroll', function(){ syncScroll(editor, previewPane); }); previewPane.addEventListener('scroll', function(){ syncScroll(previewPane, editor); }); // Tab key inserts tab in textarea editor.addEventListener('keydown', function(e){ if(e.key === 'Tab'){ e.preventDefault(); var start = editor.selectionStart, end = editor.selectionEnd; editor.value = editor.value.substring(0, start) + ' ' + editor.value.substring(end); editor.setSelectionRange(start + 2, start + 2); render(); } }); // Init i18n i18n.init(function(){ render(); }); // If i18n not ready in 500ms, render anyway setTimeout(render, 500); });