${html}

`;\n setMarkdown(turndownService.turndown(wrappedHtml));\n }, [html, turndownService]);\n\n const copyToClipboard = async () => {\n try {\n await navigator.clipboard.writeText(markdown);\n setCopySuccess(true);\n setTimeout(() => setCopySuccess(false), 2000);\n } catch (err) {\n console.error('Failed to copy text: ', err);\n }\n };\n\n return (\n

HTML to Markdown Converter

HTML Input

\n setHtml(e.target.value)}\n placeholder=\"Enter your HTML here (including partial tables and links)...\"\n />\n

Markdown Output

{markdown}

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n HTML to Markdown Converter (with Table and Link Support)\n \n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\n:root {\n --primary-color: #6c5ce7;\n --secondary-color: #a29bfe;\n --background-color: #dfe6e9;\n --text-color: #2d3436;\n --frosted-bg: rgba(255, 255, 255, 0.1);\n}\n\nbody {\n font-family: 'Roboto', sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n margin: 0;\n padding: 0;\n background-color: var(--background-color);\n background-image: linear-gradient(45deg, var(--primary-color), var(--secondary-color));\n min-height: 100vh;\n}\n\n.container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 40px 20px;\n}\n\nh1 {\n text-align: center;\n color: #fff;\n font-size: 2.5rem;\n margin-bottom: 40px;\n text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.converter {\n display: flex;\n gap: 40px;\n margin-top: 20px;\n}\n\n.input-section, .output-section {\n flex: 1;\n background-color: var(--frosted-bg);\n backdrop-filter: blur(10px);\n border-radius: 15px;\n padding: 30px;\n box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);\n border: 1px solid rgba(255, 255, 255, 0.18);\n transition: transform 0.3s ease;\n display: flex;\n flex-direction: column;\n}\n\n.input-section:hover, .output-section:hover {\n transform: translateY(-5px);\n}\n\nh2 {\n margin-top: 0;\n color: #fff;\n font-size: 1.5rem;\n margin-bottom: 20px;\n}\n\ntextarea, pre {\n width: 100%;\n height: 300px;\n border: none;\n border-radius: 8px;\n padding: 15px;\n font-size: 14px;\n line-height: 1.6;\n background-color: rgba(255, 255, 255, 0.1);\n color: #fff;\n resize: vertical;\n box-sizing: border-box;\n flex-grow: 1;\n overflow-y: auto;\n}\n\ntextarea::placeholder {\n color: rgba(255, 255, 255, 0.5);\n}\n\npre {\n white-space: pre-wrap;\n word-wrap: break-word;\n overflow-x: auto;\n margin: 0;\n}\n\n.copy-button {\n display: block;\n margin-top: 20px;\n padding: 10px 20px;\n background-color: var(--primary-color);\n color: #fff;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n font-size: 16px;\n transition: background-color 0.3s, transform 0.3s;\n}\n\n.copy-button:hover {\n background-color: var(--secondary-color);\n transform: translateY(-2px);\n}\n\nfooter {\n text-align: center;\n margin-top: 40px;\n color: #fff;\n}\n\nfooter a {\n color: #fff;\n text-decoration: none;\n border-bottom: 1px solid rgba(255, 255, 255, 0.3);\n transition: border-color 0.3s;\n}\n\nfooter a:hover {\n border-color: #fff;\n}\n\n@media (max-width: 768px) {\n .converter {\n flex-direction: column;\n }\n \n .input-section, .output-section {\n margin-bottom: 20px;\n }\n}\n\n/* Scrollbar Styles */\n::-webkit-scrollbar {\n width: 10px;\n}\n\n::-webkit-scrollbar-track {\n background: rgba(255, 255, 255, 0.1);\n}\n\n::-webkit-scrollbar-thumb {\n background: rgba(255, 255, 255, 0.3);\n border-radius: 5px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n background: rgba(255, 255, 255, 0.5);\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/willow/htmlToMarkdownConverter/code/main.tsx","extension","actionData","errors"]