{"id":902,"date":"2025-10-23T18:56:47","date_gmt":"2025-10-23T18:56:47","guid":{"rendered":"https:\/\/www.julianreed.net\/?page_id=902"},"modified":"2025-11-15T13:04:41","modified_gmt":"2025-11-15T13:04:41","slug":"markdown-page-viewer","status":"publish","type":"page","link":"https:\/\/www.julianreed.net\/?page_id=902","title":{"rendered":"Markdown to Email Converter"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/marked\/marked.min.js\"><\/script>\n    <style>\n        body {\n            font-family: Georgia, 'Times New Roman', serif;\n            background: #fafafa;\n            color: #333;\n            line-height: 1.7;\n            padding: 40px 20px;\n            margin: 0;\n        }\n\n        .container {\n            max-width: 1200px;\n            margin: 0 auto;\n        }\n\n        header {\n            margin-bottom: 50px;\n            border-bottom: 1px solid #ddd;\n            padding-bottom: 30px;\n        }\n\n        h1 {\n            font-size: 2.2em;\n            font-weight: 400;\n            margin-bottom: 15px;\n            color: #222;\n            letter-spacing: -0.5px;\n        }\n\n        .subtitle {\n            font-size: 1.05em;\n            color: #666;\n            font-style: italic;\n            font-weight: 300;\n        }\n\n        .panel {\n            background: white;\n            border: 1px solid #e0e0e0;\n            border-radius: 2px;\n            box-shadow: 0 1px 3px rgba(0,0,0,0.05);\n            overflow: hidden;\n            margin-bottom: 30px;\n        }\n\n        .panel-header {\n            background: #f8f8f8;\n            color: #333;\n            padding: 15px 20px;\n            font-weight: 500;\n            font-size: 0.95em;\n            border-bottom: 1px solid #e0e0e0;\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n        }\n\n        .panel-body {\n            padding: 20px;\n        }\n\n        textarea {\n            width: 100%;\n            min-height: 400px;\n            padding: 15px;\n            border: 1px solid #ddd;\n            border-radius: 2px;\n            font-family: 'Courier New', Monaco, monospace;\n            font-size: 14px;\n            resize: vertical;\n            transition: border-color 0.2s;\n            background: #fefefe;\n            color: #333;\n        }\n\n        textarea:focus {\n            outline: none;\n            border-color: #999;\n            background: white;\n        }\n\n        .preview-area, .html-output {\n            min-height: 300px;\n            padding: 20px;\n            border: 1px solid #e8e8e8;\n            border-radius: 2px;\n            overflow-y: auto;\n        }\n\n        .preview-area {\n            background: white;\n        }\n\n        .html-output {\n            background: #fafafa;\n            font-family: 'Courier New', Monaco, monospace;\n            font-size: 13px;\n            white-space: pre-wrap;\n            word-wrap: break-word;\n            color: #444;\n        }\n\n        .button-group {\n            display: flex;\n            gap: 10px;\n            margin-top: 15px;\n        }\n\n        button {\n            flex: 1;\n            padding: 12px 24px;\n            border: 1px solid #333;\n            border-radius: 2px;\n            font-weight: 400;\n            font-size: 13px;\n            cursor: pointer;\n            transition: all 0.2s;\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n            background: white;\n            color: #333;\n        }\n\n        button:hover {\n            background: #333;\n            color: white;\n        }\n\n        .btn-primary {\n            background: #222;\n            color: white;\n        }\n\n        .btn-primary:hover {\n            background: #000;\n        }\n\n        .notification {\n            position: fixed;\n            top: 30px;\n            right: 30px;\n            padding: 15px 25px;\n            background: #333;\n            color: white;\n            border-radius: 2px;\n            box-shadow: 0 2px 8px rgba(0,0,0,0.15);\n            opacity: 0;\n            transform: translateY(-10px);\n            transition: all 0.3s;\n            pointer-events: none;\n            z-index: 9999;\n            font-size: 14px;\n        }\n\n        .notification.show {\n            opacity: 1;\n            transform: translateY(0);\n        }\n\n        .preview-area h1, .preview-area h2, .preview-area h3 {\n            margin-top: 1.5em;\n            margin-bottom: 0.6em;\n            color: #222;\n            font-weight: 400;\n            line-height: 1.3;\n        }\n\n        .preview-area h1:first-child,\n        .preview-area h2:first-child,\n        .preview-area h3:first-child {\n            margin-top: 0;\n        }\n\n        .preview-area h1 { font-size: 2em; letter-spacing: -0.5px; }\n        .preview-area h2 { font-size: 1.6em; letter-spacing: -0.3px; }\n        .preview-area h3 { font-size: 1.3em; }\n        .preview-area p { margin-bottom: 1.2em; line-height: 1.7; color: #333; }\n        .preview-area ul, .preview-area ol { margin-bottom: 1.2em; padding-left: 2em; }\n        .preview-area li { margin-bottom: 0.6em; line-height: 1.7; }\n        .preview-area code {\n            background: #f5f5f5;\n            padding: 2px 6px;\n            border-radius: 2px;\n            font-family: monospace;\n            font-size: 0.9em;\n            color: #c7254e;\n        }\n        .preview-area pre {\n            background: #f8f8f8;\n            padding: 15px;\n            border: 1px solid #e8e8e8;\n            border-radius: 2px;\n            overflow-x: auto;\n            margin-bottom: 1.2em;\n        }\n        .preview-area pre code { background: none; padding: 0; color: #333; }\n        .preview-area blockquote {\n            border-left: 3px solid #ddd;\n            padding-left: 1.5em;\n            margin: 1.5em 0;\n            color: #666;\n            font-style: italic;\n        }\n        .preview-area a { color: #333; text-decoration: underline; text-decoration-color: #ccc; }\n        .preview-area a:hover { text-decoration-color: #333; }\n        .preview-area strong { font-weight: 600; color: #222; }\n        .placeholder { color: #999; text-align: center; font-style: italic; padding: 50px 20px; }\n\n        @media (max-width: 768px) {\n            h1 { font-size: 1.8em; }\n            body { padding: 30px 15px; }\n            .button-group { flex-direction: column; }\n            button { width: 100%; }\n        }\n    <\/style>\n<\/head>\n<body>\n    <div class=\"container\">\n        <header>\n            <p class=\"subtitle\">Transform your markdown into email-ready HTML<\/p>\n        <\/header>\n\n        <div class=\"panel\">\n            <div class=\"panel-header\">Markdown Input<\/div>\n            <div class=\"panel-body\">\n                <textarea id=\"mdInput\" placeholder=\"# Example Heading\n\nThis is a paragraph with **bold** and *italic* text.\n\n- List item 1\n- List item 2\n\n[Link](https:\/\/example.com)\"><\/textarea>\n            <\/div>\n        <\/div>\n\n        <div class=\"panel\">\n            <div class=\"panel-header\">Preview<\/div>\n            <div class=\"panel-body\">\n                <div id=\"preview\" class=\"preview-area\">\n                    <p class=\"placeholder\">Your preview will appear here&#8230;<\/p>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"panel\">\n            <div class=\"panel-header\">Email-Ready HTML<\/div>\n            <div class=\"panel-body\">\n                <div id=\"htmlOutput\" class=\"html-output\">Your HTML will appear here&#8230;<\/div>\n                <div class=\"button-group\">\n                    <button class=\"btn-primary\" onclick=\"copyHtml()\">Copy HTML<\/button>\n                    <button onclick=\"clearAll()\">Clear All<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div id=\"notification\" class=\"notification\">Copied!<\/div>\n\n    <script>\n        marked.setOptions({ breaks: true, gfm: true });\n        \n        const input = document.getElementById('mdInput');\n        const preview = document.getElementById('preview');\n        const output = document.getElementById('htmlOutput');\n        const notif = document.getElementById('notification');\n\n        function convert() {\n            const md = input.value;\n            if (!md.trim()) {\n                preview.innerHTML = '<p class=\"placeholder\">Your preview will appear here...<\/p>';\n                output.textContent = 'Your HTML will appear here...';\n                return;\n            }\n            const html = marked.parse(md);\n            const email = '<div style=\"font-family: Georgia, \\'Times New Roman\\', serif; font-size: 16px; line-height: 1.7; color: #333; max-width: 600px;\">\\n' + html + '\\n<\/div>';\n            preview.innerHTML = html;\n            output.textContent = email;\n        }\n\n        function copyHtml() {\n            const html = output.textContent;\n            if (html === 'Your HTML will appear here...') {\n                showNotif('Nothing to copy!');\n                return;\n            }\n            navigator.clipboard.writeText(html).then(() => {\n                showNotif('Copied!');\n            }).catch(() => {\n                const ta = document.createElement('textarea');\n                ta.value = html;\n                ta.style.cssText = 'position:fixed;opacity:0';\n                document.body.appendChild(ta);\n                ta.select();\n                document.execCommand('copy');\n                document.body.removeChild(ta);\n                showNotif('Copied!');\n            });\n        }\n\n        function clearAll() {\n            if (confirm('Clear all?')) {\n                input.value = '';\n                convert();\n            }\n        }\n\n        function showNotif(msg) {\n            notif.textContent = msg;\n            notif.classList.add('show');\n            setTimeout(() => notif.classList.remove('show'), 2500);\n        }\n\n        input.addEventListener('input', convert);\n        convert();\n    <\/script>\n<\/body>\n<\/html>\n\n\n    <div id=\"markdown-viewer-app\">\n        <style>\n            #markdown-viewer-app * {\n                box-sizing: border-box;\n            }\n\n            #markdown-viewer-app {\n                font-family: Georgia, serif;\n                max-width: 1200px;\n                margin: 0 auto;\n                padding: 20px;\n                background-color: #fafafa;\n            }\n\n            .md-header {\n                margin-bottom: 30px;\n                padding-bottom: 20px;\n                border-bottom: 1px solid #e0e0e0;\n            }\n\n            .md-header h1 {\n                font-size: 2em;\n                margin: 0 0 10px 0;\n                color: #333;\n                font-weight: 400;\n            }\n\n            .md-header p {\n                color: #666;\n                margin: 0;\n                font-size: 0.95em;\n            }\n\n            .md-content-grid {\n                display: grid;\n                grid-template-columns: 1fr 1fr;\n                gap: 20px;\n                margin-bottom: 20px;\n            }\n\n            .md-section h2 {\n                font-size: 1.2em;\n                margin-top: 0;\n                margin-bottom: 15px;\n                color: #444;\n                font-weight: 400;\n            }\n\n            #md-input {\n                width: 100%;\n                height: 500px;\n                padding: 20px;\n                font-family: Monaco, 'Courier New', monospace;\n                font-size: 14px;\n                border: 1px solid #ddd;\n                border-radius: 4px;\n                resize: vertical;\n                background-color: white;\n                line-height: 1.6;\n                color: #333;\n            }\n\n            #md-preview {\n                padding: 20px;\n                background-color: white;\n                border: 1px solid #ddd;\n                border-radius: 4px;\n                min-height: 500px;\n                line-height: 1.7;\n                color: #333;\n                overflow-wrap: break-word;\n            }\n\n            .md-export-buttons {\n                display: flex;\n                gap: 15px;\n                justify-content: center;\n                margin-top: 30px;\n                padding-top: 20px;\n                border-top: 1px solid #e0e0e0;\n                flex-wrap: wrap;\n            }\n\n            .md-btn {\n                display: inline-flex;\n                align-items: center;\n                gap: 8px;\n                padding: 12px 24px;\n                background-color: white;\n                color: #333;\n                border: 1px solid #ddd;\n                border-radius: 4px;\n                cursor: pointer;\n                font-size: 14px;\n                font-family: Georgia, serif;\n                transition: all 0.2s;\n                text-decoration: none;\n            }\n\n            .md-btn:hover {\n                background-color: #f5f5f5;\n                border-color: #999;\n            }\n\n            .md-btn svg {\n                width: 18px;\n                height: 18px;\n                flex-shrink: 0;\n            }\n\n            \/* Preview Content Styles *\/\n            #md-preview h1 {\n                font-size: 2em;\n                margin-top: 0;\n                border-bottom: 1px solid #eee;\n                padding-bottom: 10px;\n                font-weight: 400;\n            }\n\n            #md-preview h2 {\n                font-size: 1.5em;\n                margin-top: 1.5em;\n                font-weight: 400;\n            }\n\n            #md-preview h3 {\n                font-size: 1.2em;\n                margin-top: 1.2em;\n                font-weight: 400;\n            }\n\n            #md-preview code {\n                background: #f4f4f4;\n                padding: 2px 6px;\n                border-radius: 3px;\n                font-family: Monaco, 'Courier New', monospace;\n                font-size: 0.9em;\n            }\n\n            #md-preview pre {\n                background: #f4f4f4;\n                padding: 15px;\n                border-radius: 5px;\n                overflow-x: auto;\n                border-left: 3px solid #ddd;\n                margin: 1em 0;\n            }\n\n            #md-preview pre code {\n                background: none;\n                padding: 0;\n            }\n\n            #md-preview blockquote {\n                border-left: 4px solid #ddd;\n                margin: 1em 0;\n                padding-left: 20px;\n                color: #666;\n                font-style: italic;\n            }\n\n            #md-preview hr {\n                border: none;\n                border-top: 1px solid #eee;\n                margin: 2em 0;\n            }\n\n            #md-preview ul, #md-preview ol {\n                margin: 1em 0;\n                padding-left: 30px;\n            }\n\n            #md-preview li {\n                margin: 0.5em 0;\n            }\n\n            #md-preview p {\n                margin: 1em 0;\n            }\n\n            #md-preview a {\n                color: #333;\n                text-decoration: underline;\n            }\n\n            \/* Print Styles *\/\n            @media print {\n                body {\n                    background: white !important;\n                }\n                .md-header, .md-section h2, #md-input, .md-export-buttons {\n                    display: none !important;\n                }\n                .md-content-grid {\n                    grid-template-columns: 1fr;\n                }\n                #md-preview {\n                    border: none !important;\n                    box-shadow: none !important;\n                }\n            }\n\n            \/* Responsive *\/\n            @media (max-width: 768px) {\n                .md-content-grid {\n                    grid-template-columns: 1fr;\n                }\n                \n                .md-export-buttons {\n                    flex-direction: column;\n                }\n                \n                .md-btn {\n                    width: 100%;\n                    justify-content: center;\n                }\n            }\n        <\/style>\n\n        <!-- Header -->\n        <div class=\"md-header\">\n            <h1>Markdown Viewer<\/h1>\n            <p>Write in markdown, export to any format<\/p>\n        <\/div>\n\n        <!-- Main Content -->\n        <div class=\"md-content-grid\">\n            <!-- Editor -->\n            <div class=\"md-section\">\n                <h2>Editor<\/h2>\n                <textarea id=\"md-input\" placeholder=\"Write your markdown here...\"><\/textarea>\n            <\/div>\n\n            <!-- Preview -->\n            <div class=\"md-section\">\n                <h2>Preview<\/h2>\n                <div id=\"md-preview\"><\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Export Buttons -->\n        <div class=\"md-export-buttons\">\n            <button class=\"md-btn\" onclick=\"mdExportToPDF()\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <polyline points=\"6 9 6 2 18 2 18 9\"><\/polyline>\n                    <path d=\"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2\"><\/path>\n                    <rect x=\"6\" y=\"14\" width=\"12\" height=\"8\"><\/rect>\n                <\/svg>\n                Export to PDF\n            <\/button>\n\n            <button class=\"md-btn\" onclick=\"mdExportToWord()\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"><\/path>\n                    <polyline points=\"14 2 14 8 20 8\"><\/polyline>\n                    <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"><\/line>\n                    <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"><\/line>\n                    <polyline points=\"10 9 9 9 8 9\"><\/polyline>\n                <\/svg>\n                Export to Word\n            <\/button>\n\n            <button class=\"md-btn\" onclick=\"mdCopyForGoogleDocs()\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path>\n                    <polyline points=\"7 10 12 15 17 10\"><\/polyline>\n                    <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"><\/line>\n                <\/svg>\n                Copy for Google Docs\n            <\/button>\n\n            <button class=\"md-btn\" onclick=\"mdExportToEmail()\">\n                <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"><\/path>\n                    <polyline points=\"22,6 12,13 2,6\"><\/polyline>\n                <\/svg>\n                Send via Email\n            <\/button>\n        <\/div>\n\n        <script>\n            (function() {\n                \/\/ Default markdown content\n                const defaultMarkdown = `# Welcome to Markdown Viewer\n\n## About This Tool\n\nThis is a **professional markdown viewer** with export capabilities. Write your content in markdown and export it to various formats.\n\n### Features\n\n- Clean, readable interface\n- Real-time markdown rendering\n- Export to PDF, Word, and Email\n- Copy-ready for Google Docs\n\n### Example Content\n\nHere's some sample markdown to get you started:\n\n**Bold text** and *italic text* work perfectly.\n\n1. Ordered lists\n2. Are supported\n3. With proper formatting\n\n- Unordered lists too\n- Look great\n- And are easy to read\n\n> Blockquotes are rendered beautifully for emphasis.\n\n\\`\\`\\`javascript\n\/\/ Code blocks with syntax highlighting\nconst example = \"Hello World\";\nconsole.log(example);\n\\`\\`\\`\n\n---\n\nFeel free to replace this content with your own!`;\n\n                \/\/ Initialize\n                const textarea = document.getElementById('md-input');\n                const preview = document.getElementById('md-preview');\n                textarea.value = defaultMarkdown;\n\n                \/\/ Parse markdown to HTML\n                function parseMarkdown(md) {\n                    let html = md;\n                    \n                    \/\/ Escape HTML\n                    html = html.replace(\/&\/g, '&amp;')\n                              .replace(\/<\/g, '&lt;')\n                              .replace(\/>\/g, '&gt;');\n                    \n                    \/\/ Code blocks (before other processing)\n                    html = html.replace(\/```(\\w+)?\\n([\\s\\S]*?)```\/gim, function(match, lang, code) {\n                        return '<pre><code>' + code.trim() + '<\/code><\/pre>';\n                    });\n                    \n                    \/\/ Headers\n                    html = html.replace(\/^### (.*$)\/gim, '<h3>$1<\/h3>');\n                    html = html.replace(\/^## (.*$)\/gim, '<h2>$1<\/h2>');\n                    html = html.replace(\/^# (.*$)\/gim, '<h1>$1<\/h1>');\n                    \n                    \/\/ Bold\n                    html = html.replace(\/\\*\\*(.*?)\\*\\*\/gim, '<strong>$1<\/strong>');\n                    \n                    \/\/ Italic\n                    html = html.replace(\/\\*(.*?)\\*\/gim, '<em>$1<\/em>');\n                    \n                    \/\/ Inline code\n                    html = html.replace(\/`([^`]+)`\/gim, '<code>$1<\/code>');\n                    \n                    \/\/ Links\n                    html = html.replace(\/\\[([^\\]]+)\\]\\(([^)]+)\\)\/gim, '<a href=\"$2\">$1<\/a>');\n                    \n                    \/\/ Blockquotes\n                    html = html.replace(\/^&gt; (.*$)\/gim, '<blockquote>$1<\/blockquote>');\n                    \n                    \/\/ Horizontal rules\n                    html = html.replace(\/^---$\/gim, '<hr \/>');\n                    \n                    \/\/ Lists - process line by line\n                    const lines = html.split('\\n');\n                    let inOrderedList = false;\n                    let inUnorderedList = false;\n                    let processedLines = [];\n                    \n                    for (let i = 0; i < lines.length; i++) {\n                        let line = lines[i];\n                        \n                        \/\/ Ordered list\n                        if (\/^\\d+\\.\\s+(.*)$\/.test(line)) {\n                            if (!inOrderedList) {\n                                processedLines.push('<ol>');\n                                inOrderedList = true;\n                            }\n                            processedLines.push(line.replace(\/^\\d+\\.\\s+(.*)$\/, '<li>$1<\/li>'));\n                        } else if (inOrderedList) {\n                            processedLines.push('<\/ol>');\n                            inOrderedList = false;\n                            processedLines.push(line);\n                        }\n                        \/\/ Unordered list\n                        else if (\/^-\\s+(.*)$\/.test(line)) {\n                            if (!inUnorderedList) {\n                                processedLines.push('<ul>');\n                                inUnorderedList = true;\n                            }\n                            processedLines.push(line.replace(\/^-\\s+(.*)$\/, '<li>$1<\/li>'));\n                        } else if (inUnorderedList) {\n                            processedLines.push('<\/ul>');\n                            inUnorderedList = false;\n                            processedLines.push(line);\n                        } else {\n                            processedLines.push(line);\n                        }\n                    }\n                    \n                    \/\/ Close any open lists\n                    if (inOrderedList) processedLines.push('<\/ol>');\n                    if (inUnorderedList) processedLines.push('<\/ul>');\n                    \n                    html = processedLines.join('\\n');\n                    \n                    \/\/ Paragraphs\n                    html = html.replace(\/\\n\\n+\/g, '<\/p><p>');\n                    html = html.replace(\/\\n\/g, '<br \/>');\n                    \n                    \/\/ Wrap in paragraph if not starting with a block element\n                    if (!html.match(\/^<(h[1-6]|p|ul|ol|pre|blockquote|hr)\/)) {\n                        html = '<p>' + html + '<\/p>';\n                    }\n                    \n                    return html;\n                }\n\n                \/\/ Update preview\n                function updatePreview() {\n                    const markdown = textarea.value;\n                    preview.innerHTML = parseMarkdown(markdown);\n                }\n\n                \/\/ Export functions (made global)\n                window.mdExportToPDF = function() {\n                    window.print();\n                };\n\n                window.mdExportToWord = function() {\n                    const html = preview.innerHTML;\n                    const blob = new Blob(\n                        ['\\ufeff', \n                        `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http:\/\/www.w3.org\/TR\/REC-html40'>\n                        <head>\n                            <meta charset='utf-8'>\n                            <title>Document<\/title>\n                            <style>\n                                body {\n                                    font-family: Georgia, serif;\n                                    line-height: 1.7;\n                                    max-width: 800px;\n                                    margin: 0 auto;\n                                    padding: 20px;\n                                    color: #333;\n                                }\n                                h1 {\n                                    font-size: 2em;\n                                    margin-top: 0;\n                                    border-bottom: 1px solid #eee;\n                                    padding-bottom: 10px;\n                                    font-weight: 400;\n                                }\n                                h2 {\n                                    font-size: 1.5em;\n                                    margin-top: 1.5em;\n                                    font-weight: 400;\n                                }\n                                h3 {\n                                    font-size: 1.2em;\n                                    margin-top: 1.2em;\n                                    font-weight: 400;\n                                }\n                                code {\n                                    background: #f4f4f4;\n                                    padding: 2px 6px;\n                                    border-radius: 3px;\n                                    font-family: monospace;\n                                }\n                                pre {\n                                    background: #f4f4f4;\n                                    padding: 15px;\n                                    border-radius: 5px;\n                                    overflow-x: auto;\n                                    border-left: 3px solid #ddd;\n                                }\n                                pre code {\n                                    background: none;\n                                    padding: 0;\n                                }\n                                blockquote {\n                                    border-left: 4px solid #ddd;\n                                    margin: 1em 0;\n                                    padding-left: 20px;\n                                    color: #666;\n                                    font-style: italic;\n                                }\n                                hr {\n                                    border: none;\n                                    border-top: 1px solid #eee;\n                                    margin: 2em 0;\n                                }\n                            <\/style>\n                        <\/head>\n                        <body>${html}<\/body>\n                        <\/html>`],\n                        { type: 'application\/msword' }\n                    );\n                    \n                    const url = URL.createObjectURL(blob);\n                    const link = document.createElement('a');\n                    link.href = url;\n                    link.download = 'document.doc';\n                    link.click();\n                    URL.revokeObjectURL(url);\n                };\n\n                window.mdCopyForGoogleDocs = function() {\n                    const tempDiv = document.createElement('div');\n                    tempDiv.innerHTML = preview.innerHTML;\n                    tempDiv.style.position = 'absolute';\n                    tempDiv.style.left = '-9999px';\n                    document.body.appendChild(tempDiv);\n                    \n                    const range = document.createRange();\n                    range.selectNode(tempDiv);\n                    window.getSelection().removeAllRanges();\n                    window.getSelection().addRange(range);\n                    \n                    try {\n                        document.execCommand('copy');\n                        alert('Content copied! You can now paste it into Google Docs (Ctrl+V or Cmd+V).');\n                    } catch (err) {\n                        alert('Failed to copy. Please try selecting the preview content and copying manually.');\n                    }\n                    \n                    document.body.removeChild(tempDiv);\n                    window.getSelection().removeAllRanges();\n                };\n\n                window.mdExportToEmail = function() {\n                    const tempDiv = document.createElement('div');\n                    tempDiv.innerHTML = preview.innerHTML;\n                    tempDiv.style.position = 'absolute';\n                    tempDiv.style.left = '-9999px';\n                    document.body.appendChild(tempDiv);\n                    \n                    const range = document.createRange();\n                    range.selectNode(tempDiv);\n                    window.getSelection().removeAllRanges();\n                    window.getSelection().addRange(range);\n                    \n                    try {\n                        document.execCommand('copy');\n                        alert('Formatted content copied! Open your email client and paste (Ctrl+V or Cmd+V) to send with full formatting (bold, italics, headers, etc.).');\n                    } catch (err) {\n                        alert('Failed to copy. Please try selecting the preview content and copying manually.');\n                    }\n                    \n                    document.body.removeChild(tempDiv);\n                    window.getSelection().removeAllRanges();\n                };\n\n                \/\/ Listen for changes\n                textarea.addEventListener('input', updatePreview);\n                \n                \/\/ Initial render\n                updatePreview();\n            })();\n        <\/script>\n    <\/div>\n    \n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Transform your markdown into email-ready HTML Markdown Input Preview Your preview will appear here&#8230; Email-Ready HTML Your HTML will appear here&#8230; Copy HTML Clear All Copied!<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","footnotes":""},"class_list":["post-902","page","type-page","status-publish","hentry","entry"],"aioseo_notices":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.julianreed.net\/index.php?rest_route=\/wp\/v2\/pages\/902","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.julianreed.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.julianreed.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.julianreed.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.julianreed.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=902"}],"version-history":[{"count":22,"href":"https:\/\/www.julianreed.net\/index.php?rest_route=\/wp\/v2\/pages\/902\/revisions"}],"predecessor-version":[{"id":946,"href":"https:\/\/www.julianreed.net\/index.php?rest_route=\/wp\/v2\/pages\/902\/revisions\/946"}],"wp:attachment":[{"href":"https:\/\/www.julianreed.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}