Markdown
Preview
', `${scrollScript}`); const doc = preview.contentWindow.document; doc.open(); doc.write(html); doc.close(); } catch (e) { console.error(e); } } let timer; input.addEventListener('input', () => { updateEditorHighlight(); clearTimeout(timer); timer = setTimeout(render, 300); }); // Copy Markdown Button Handler const copyBtn = document.getElementById('copyBtn'); if (copyBtn) { copyBtn.addEventListener('click', async () => { try { await navigator.clipboard.writeText(input.value); copyBtn.textContent = 'Copied !'; copyBtn.classList.add('copied'); setTimeout(() => { copyBtn.textContent = 'Copy'; copyBtn.classList.remove('copied'); }, 2000); } catch (err) { console.error('Failed to copy markdown:', err); } }); } // Auto Scroll Sync (textarea -> iframe preview) - Disabled by default const ENABLE_SCROLL_SYNC = false; let isSyncingInputScroll = false; input.addEventListener('scroll', () => { if (!ENABLE_SCROLL_SYNC || isSyncingInputScroll) return; isSyncingInputScroll = true; const maxInputScroll = input.scrollHeight - input.clientHeight; if (maxInputScroll > 0 && preview.contentWindow && preview.contentWindow.document) { const ratio = input.scrollTop / maxInputScroll; const win = preview.contentWindow; const doc = win.document.documentElement; const maxPreviewScroll = doc.scrollHeight - win.innerHeight; if (maxPreviewScroll > 0) { win.scrollTo({ top: ratio * maxPreviewScroll, behavior: 'instant' }); } } requestAnimationFrame(() => { isSyncingInputScroll = false; }); }); // Preview pane: light/dark toggle. Mutates the iframe's // document data-theme and persists via the same localStorage // key the theme-init script reads on next render. const previewThemeToggle = document.getElementById('previewThemeToggle'); if (previewThemeToggle) { previewThemeToggle.addEventListener('click', () => { const doc = preview.contentWindow && preview.contentWindow.document; if (!doc) return; const html = doc.documentElement; const current = html.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'; const next = current === 'dark' ? 'light' : 'dark'; html.setAttribute('data-theme', next); try { doc.defaultView.localStorage.setItem('docmd-theme', next); } catch (e) {} }); } render(); const resizer = document.getElementById('resizer'); const editorPane = document.getElementById('editorPane'); const workspace = document.getElementById('workspace'); let isResizing = false; resizer.addEventListener('mousedown', (e) => { isResizing = true; resizer.classList.add('resizing'); preview.style.pointerEvents = 'none'; document.body.style.cursor = 'col-resize'; }); document.addEventListener('mousemove', (e) => { if (!isResizing) return; const containerWidth = workspace.offsetWidth; const newEditorWidth = (e.clientX / containerWidth) * 100; if (newEditorWidth > 15 && newEditorWidth < 85) { editorPane.style.width = newEditorWidth + '%'; } }); document.addEventListener('mouseup', () => { if (isResizing) { isResizing = false; resizer.classList.remove('resizing'); preview.style.pointerEvents = 'auto'; document.body.style.cursor = 'default'; } }); function setMode(mode) { document.querySelectorAll('.view-switcher .view-btn').forEach(btn => { btn.classList.toggle('active', btn.dataset.mode === mode); }); const mobMode = mode === 'split' ? 'editor' : mode; document.getElementById('mob-edit').classList.toggle('active', mobMode === 'editor'); document.getElementById('mob-prev').classList.toggle('active', mobMode === 'preview'); document.body.classList.remove('mode-split', 'mode-single', 'show-editor', 'show-preview'); if (mode === 'split') { document.body.classList.add('mode-split'); } else { document.body.classList.add('mode-single'); document.body.classList.add('show-' + mode); } }