{"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 class=\"wp-block-paragraph\"><\/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":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.9 - aioseo.com -->\n\t<meta name=\"description\" content=\"Transform your markdown into email-ready HTML Markdown Input Preview Your preview will appear here... Email-Ready HTML Your HTML will appear here... Copy HTML Clear All Copied! Markdown Viewer Write in markdown, export to any format Editor Preview Export to PDF Export to Word Copy for Google Docs Send via Email\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.julianreed.net\/?page_id=902\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.9\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_GB\" \/>\n\t\t<meta property=\"og:site_name\" content=\"changing my mind -\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Markdown to Email Converter - changing my mind\" \/>\n\t\t<meta property=\"og:description\" content=\"Transform your markdown into email-ready HTML Markdown Input Preview Your preview will appear here... Email-Ready HTML Your HTML will appear here... Copy HTML Clear All Copied! Markdown Viewer Write in markdown, export to any format Editor Preview Export to PDF Export to Word Copy for Google Docs Send via Email\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.julianreed.net\/?page_id=902\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2025-10-23T18:56:47+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2025-11-15T13:04:41+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Markdown to Email Converter - changing my mind\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Transform your markdown into email-ready HTML Markdown Input Preview Your preview will appear here... Email-Ready HTML Your HTML will appear here... Copy HTML Clear All Copied! Markdown Viewer Write in markdown, export to any format Editor Preview Export to PDF Export to Word Copy for Google Docs Send via Email\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.julianreed.net\\\/?page_id=902#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.julianreed.net#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.julianreed.net\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.julianreed.net\\\/?page_id=902#listItem\",\"name\":\"Markdown to Email Converter\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.julianreed.net\\\/?page_id=902#listItem\",\"position\":2,\"name\":\"Markdown to Email Converter\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.julianreed.net#listItem\",\"name\":\"Home\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.julianreed.net\\\/#organization\",\"name\":\"julianreed.net\",\"url\":\"https:\\\/\\\/www.julianreed.net\\\/\",\"sameAs\":[\"https:\\\/\\\/www.pinterest.co.uk\\\/julianpreed\\\/\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.julianreed.net\\\/?page_id=902#webpage\",\"url\":\"https:\\\/\\\/www.julianreed.net\\\/?page_id=902\",\"name\":\"Markdown to Email Converter - changing my mind\",\"description\":\"Transform your markdown into email-ready HTML Markdown Input Preview Your preview will appear here... Email-Ready HTML Your HTML will appear here... Copy HTML Clear All Copied! Markdown Viewer Write in markdown, export to any format Editor Preview Export to PDF Export to Word Copy for Google Docs Send via Email\",\"inLanguage\":\"en-GB\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.julianreed.net\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.julianreed.net\\\/?page_id=902#breadcrumblist\"},\"datePublished\":\"2025-10-23T18:56:47+00:00\",\"dateModified\":\"2025-11-15T13:04:41+00:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.julianreed.net\\\/#website\",\"url\":\"https:\\\/\\\/www.julianreed.net\\\/\",\"name\":\"JulianReed.net\",\"inLanguage\":\"en-GB\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.julianreed.net\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Markdown to Email Converter - changing my mind","description":"Transform your markdown into email-ready HTML Markdown Input Preview Your preview will appear here... Email-Ready HTML Your HTML will appear here... Copy HTML Clear All Copied! Markdown Viewer Write in markdown, export to any format Editor Preview Export to PDF Export to Word Copy for Google Docs Send via Email","canonical_url":"https:\/\/www.julianreed.net\/?page_id=902","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BreadcrumbList","@id":"https:\/\/www.julianreed.net\/?page_id=902#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.julianreed.net#listItem","position":1,"name":"Home","item":"https:\/\/www.julianreed.net","nextItem":{"@type":"ListItem","@id":"https:\/\/www.julianreed.net\/?page_id=902#listItem","name":"Markdown to Email Converter"}},{"@type":"ListItem","@id":"https:\/\/www.julianreed.net\/?page_id=902#listItem","position":2,"name":"Markdown to Email Converter","previousItem":{"@type":"ListItem","@id":"https:\/\/www.julianreed.net#listItem","name":"Home"}}]},{"@type":"Organization","@id":"https:\/\/www.julianreed.net\/#organization","name":"julianreed.net","url":"https:\/\/www.julianreed.net\/","sameAs":["https:\/\/www.pinterest.co.uk\/julianpreed\/"]},{"@type":"WebPage","@id":"https:\/\/www.julianreed.net\/?page_id=902#webpage","url":"https:\/\/www.julianreed.net\/?page_id=902","name":"Markdown to Email Converter - changing my mind","description":"Transform your markdown into email-ready HTML Markdown Input Preview Your preview will appear here... Email-Ready HTML Your HTML will appear here... Copy HTML Clear All Copied! Markdown Viewer Write in markdown, export to any format Editor Preview Export to PDF Export to Word Copy for Google Docs Send via Email","inLanguage":"en-GB","isPartOf":{"@id":"https:\/\/www.julianreed.net\/#website"},"breadcrumb":{"@id":"https:\/\/www.julianreed.net\/?page_id=902#breadcrumblist"},"datePublished":"2025-10-23T18:56:47+00:00","dateModified":"2025-11-15T13:04:41+00:00"},{"@type":"WebSite","@id":"https:\/\/www.julianreed.net\/#website","url":"https:\/\/www.julianreed.net\/","name":"JulianReed.net","inLanguage":"en-GB","publisher":{"@id":"https:\/\/www.julianreed.net\/#organization"}}]},"og:locale":"en_GB","og:site_name":"changing my mind -","og:type":"article","og:title":"Markdown to Email Converter - changing my mind","og:description":"Transform your markdown into email-ready HTML Markdown Input Preview Your preview will appear here... Email-Ready HTML Your HTML will appear here... Copy HTML Clear All Copied! Markdown Viewer Write in markdown, export to any format Editor Preview Export to PDF Export to Word Copy for Google Docs Send via Email","og:url":"https:\/\/www.julianreed.net\/?page_id=902","article:published_time":"2025-10-23T18:56:47+00:00","article:modified_time":"2025-11-15T13:04:41+00:00","twitter:card":"summary","twitter:title":"Markdown to Email Converter - changing my mind","twitter:description":"Transform your markdown into email-ready HTML Markdown Input Preview Your preview will appear here... Email-Ready HTML Your HTML will appear here... Copy HTML Clear All Copied! Markdown Viewer Write in markdown, export to any format Editor Preview Export to PDF Export to Word Copy for Google Docs Send via Email"},"aioseo_meta_data":{"post_id":"902","title":null,"description":null,"keywords":null,"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"WebPage","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":{"faqs":[],"keyPoints":[],"titles":[],"descriptions":[],"socialPosts":{"email":[],"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"created":"2025-10-23 18:46:07","updated":"2025-11-15 13:09:57","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.julianreed.net\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tMarkdown to Email Converter\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.julianreed.net"},{"label":"Markdown to Email Converter","link":"https:\/\/www.julianreed.net\/?page_id=902"}],"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}]}}