HTML to Markdown conversion എന്നത് എന്താണ്?
HTML ബ്രൗസർ display ചെയ്യുന്ന rendered markup ആണ് — <h1>, <ul>, <table>, <a>, മറ്റുള്ളവ. Markdown minimal punctuation (# headings-ന്, * emphasis-ന്, - list items-ന്) ഉൾക്കൊണ്ട് അതേ structure encode ചെയ്യുന്ന ഒരു lightweight plain-text format ആണ്. GitHub Flavored Markdown (GFM) tables, strikethrough, task lists, autolinks ഉൾക്കൊണ്ട് CommonMark extend ചെയ്യുന്നു. HTML Markdown-ലേക്ക് convert ചെയ്ത് rendered അല്ലെങ്കിൽ exported HTML ഒരു editable plain-text Markdown ആക്കി — CMS content migration അല്ലെങ്കിൽ README cleanup-ന് ഇതാണ് ആവശ്യം.
Output-ൽ supported GitHub Flavored Markdown features?
Bundled turndown@7.2.0 engine turndown-plugin-gfm extension ഉൾക്കൊണ്ട് HTML-ൽ നിന്ന് full GFM superset emit ചെയ്യുന്നു: <h1>–<h6> ൽ നിന്ന് ATX-style headings # through ######, ordered, unordered lists nesting ഉൾക്കൊണ്ട്, bold **text**, italic *text*, <del> ൽ നിന്ന് strikethrough ~~text~~, inline links [text](url), images , fenced code blocks language hints ഉൾക്കൊണ്ട് (```js), inline code `code`, <table> ൽ നിന്ന് pipe tables, checkbox inputs ൽ നിന്ന് GFM task lists - [ ] / - [x], blockquotes >, horizontal rules ---. Preview pane emit ചെയ്ത Markdown marked@12.0.2 ഉൾക്കൊണ്ട് re-render ചെയ്ത് conversion visually confirm ചെയ്യാം.
HTML to Markdown conversion എങ്ങനെ പ്രവർത്തിക്കുന്നു?
ഓരോ conversion-ഉം മൂന്ന് bundled libraries ഉൾക്കൊണ്ട് ബ്രൗസറിൽ locally run ആകുന്നു — CDN ഇല്ല, fetch ഇല്ല, telemetry ഇല്ല. High-level steps:
- Sanitize: paste ചെയ്ത HTML ആദ്യം
DOMPurify.sanitize(html, { USE_PROFILES: { html: true } })ഉൾക്കൊണ്ട് run ആകുന്നു, ഏതെങ്കിലും code markup-ൽ നടക്കുന്നതിന് മുൻപ്<script>elements, ഓരോon*event handler,javascript:URIs strip ചെയ്യുന്നു. DOMPurify Mozilla MDN, Atlassian, Microsoft 365 ഉപയോഗിക്കുന്ന XSS sanitizer ആണ്. - Convert:
turndownService.turndowncleaned DOM walk ചെയ്ത് GitHub Flavored Markdown emit ചെയ്യുന്നു — headings#prefixes ആകുന്നു, lists-/1.items ആകുന്നു,<table>pipe table ആകുന്നു. Markdown read-only output<textarea>-ലേക്ക്valueഉൾക്കൊണ്ട് write ചെയ്യുന്നു (ഒരിക്കലുംinnerHTMLഅല്ല), ആകയാൽ ഇത് inherently safe ആണ്. - Render: emit ചെയ്ത Markdown
marked.parseഉൾക്കൊണ്ട് re-parse,DOMPurifyഉൾക്കൊണ്ട് വീണ്ടും sanitize, preview pane-ന്റെinnerHTMLലേക്ക് assign ചെയ്ത് Markdown expected structure-ലേക്ക് round-trip ആകുന്നുവെന്ന visual confirmation ലഭിക്കുന്നു. Live mode 150 ms debounce ഉൾക്കൊണ്ട് paste ചെയ്യുമ്പോൾ output parser thrash ചെയ്യാതെ update ചെയ്യുന്നു.
ഈ ടൂൾ HTML Markdown-ലേക്ക് convert ചെയ്യാൻ ഉപയോഗിക്കേണ്ടത് എന്തുകൊണ്ട്?
- സ്വകാര്യത: ഓരോ sanitize, convert, render pass-ഉം ബ്രൗസറിൽ. HTML — exported CMS posts, internal documentation, confidential page source ഉൾക്കൊണ്ടവ — server-ലേക്ക് ഒരിക്കലും reach ആകില്ല.
- XSS-safe by default: paste ചെയ്ത HTML turndown walk ചെയ്യുന്നതിന് മുൻപ് DOMPurify ഉൾക്കൊണ്ട് run ആകുന്നു, preview pane
innerHTML-ന് മുൻപ് ഓരോ HTML string-ഉം DOMPurify ഉൾക്കൊണ്ട് വീണ്ടും run ആകുന്നു —<script>tags,onerror=handlers ഉൾക്കൊള്ളുന്ന markup paste ചെയ്ത് inert preview, clean Markdown. - GFM-complete:
<table>elements Markdown pipe tables ആകുന്നു,<del>strikethrough ആകുന്നു, checkbox lists GFM task lists ആകുന്നു. മിക്ക online converters-ഉം HTML → Markdown path-ൽ tables drop ചെയ്യുന്നു — bundledturndown-plugin-gfmextension അവ preserve ചെയ്യുന്നു.
HTML to Markdown conversion-ന്റെ സാധാരണ ഉപയോഗങ്ങൾ?
HTML Markdown-ലേക്ക് convert ചെയ്യൽ content migration, documentation, archiving-ൽ ഉടനീളം കാണുന്നു:
- CMS migration: WordPress, Ghost post HTML ആക്കി export ചെയ്ത് Hugo / Jekyll / 11ty / Astro static-site rebuild-ന് Markdown-ലേക്ക് convert. conversion heading levels, links, lists, inline emphasis preserve ചെയ്യുന്നു.
- README cleanup: wiki page അല്ലെങ്കിൽ web article-ന്റെ rendered HTML paste ചെയ്ത് project README, docs site-ന് editable Markdown-ലേക്ക് — structure manually re-type ചെയ്യാതെ.
- Archiving and notes: HTML email, web clipping capture ചെയ്ത് Obsidian, Notion, plain-text knowledge base-ൽ store ചെയ്യാൻ Markdown-ലേക്ക് convert — Markdown diff-friendly ആയി നിലക്കുന്നു, format churn-ൽ നിന്ന് രക്ഷ.
HTML to Markdown ഉദാഹരണം?
<h2>Heading</h2><ul><li>a</li><li>b<ul><li>nested</li></ul></li></ul> paste ചെയ്ത് ## Heading, nested bullet list ഉൾക്കൊള്ളുന്ന Markdown — preview pane അതേ nested structure-ലേക്ക് re-render. header row, two data rows ഉൾക്കൊള്ളുന്ന <table> paste ചെയ്ത് equivalent | col | col | pipe table — headings, lists, tables preserve ആകുന്നുവെന്ന് confirm.
ഈ HTML to Markdown converter ബ്രൗസറിൽ run ആകുമോ?
അതെ. ഓരോ sanitize, convert, render pass-ഉം browser tab-ൽ JavaScript ആക്കി locally run ആകുന്നു. മൂന്ന് bundled libraries — turndown@7.2.0 (with turndown-plugin-gfm@1.0.2), marked@12.0.2, DOMPurify@3.1.7 — page-ന്റെ same origin-ൽ ship ചെയ്ത് — CDN ഇല്ല, fetch ഇല്ല, XMLHttpRequest ഇല്ല, input-ൽ navigator.sendBeacon ഇല്ല. Page load ആയ ശേഷം offline work ചെയ്യുന്നു. Exported posts, internal docs, confidential READMEs device-ൽ.
Rendered preview pane XSS-safe ആണോ?
അതെ. paste ചെയ്ത HTML turndown walk ചെയ്യുന്നതിന് മുൻപ് DOMPurify.sanitize ഉൾക്കൊണ്ട് run ആകുന്നു, innerHTML-ന് assign ചെയ്യുന്ന ഓരോ HTML string-ഉം ആദ്യം DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) ഉൾക്കൊണ്ട് pass ആകുന്നു. DOMPurify Cure53 maintain ചെയ്യുന്ന open-source XSS sanitizer; Mozilla MDN, Atlassian, Microsoft 365 ഉപയോഗിക്കുന്ന library. Default html profile <script> elements, on* event-handler attributes, javascript: URI schemes, known-dangerous CSS expressions remove ചെയ്യുന്നു. <img src=x onerror=alert(1)> paste ചെയ്ത് inert preview, alert fire ആകില്ല.
GFM tables HTML ൽ നിന്ന് convert ആകുമോ?
അതെ. HTML → Markdown direction turndown-plugin-gfm ഉൾക്കൊണ്ട് <table> nodes walk ചെയ്ത് equivalent pipe-table Markdown emit ചെയ്യുന്നു — header row, |---|---| alignment row, data rows. മിക്ക online converters-ഉം ഈ path-ൽ tables drop ചെയ്യുന്നു — ഇത് preserve ചെയ്യുന്നു. Strikethrough (<del>text</del> → ~~text~~), task lists (<input type="checkbox"> → - [ ] / - [x]) ഒരേ പ്രകാരം.
HTML clean ആയി convert ആകുമോ?
Canonical GFM feature set-ന് — headings h1 through h6, lists nesting ഉൾക്കൊണ്ട്, bold / italic / strikethrough, inline links, images, fenced code blocks, inline code, pipe tables, task lists, blockquotes, horizontal rules, autolinks — conversion clean, predictable. Edge cases: HTML comments (<!-- ... -->) strip ആകുന്നു; inline styling, class attributes drop ആകുന്നു Markdown-ൽ equivalent ഇല്ലാത്തതിനാൽ; <sub> / <sup> plain text ആകുന്നു. ഇവ documented turndown behaviours ആണ്, bugs അല്ല.
Fenced code blocks-ൽ syntax highlighting supported ആണോ?
v1-ൽ ഇല്ല. Fenced code blocks monospaced font, subtle background ഉൾക്കൊണ്ട് render ചെയ്യുന്നു, per-language token highlighting ഇല്ല. Prism അല്ലെങ്കിൽ highlight.js bundle ചെയ്ത് syntax highlighting add ചെയ്യൽ — ഓരോന്നും 15–40 KB plus per-language grammar. User demand ഉണ്ടെങ്കിൽ opt-in toggle tractable follow-up.
ഈ HTML to Markdown Converter turndown@7.2.0 (+ turndown-plugin-gfm@1.0.2), marked@12.0.2, DOMPurify@3.1.7 same origin-ൽ bundled ആക്കി ship ചെയ്ത്, full GFM feature set emit ചെയ്ത്, DOM touch ആകുന്നതിന് മുൻപ് ഓരോ rendered HTML string-ഉം sanitize ചെയ്യുന്നു. Upload ഇല്ല, CDN ഇല്ല, telemetry ഇല്ല — ഓരോ byte-ഉം ബ്രൗസറിൽ.