HTML முதல் Markdown மாற்றி — ஆன்லைனில் HTML ஐ Markdown க்கு மாற்றவும் _

HTML முதல் Markdown மாற்றம் என்றால் என்ன?

HTML என்பது உலாவி காட்டும் rendered markup — <h1>, <ul>, <table>, <a>, மற்றும் மற்றவை. Markdown என்பது குறைந்தபட்ச punctuation (# headings க்கு, * emphasis க்கு, - list items க்கு) பயன்படுத்தி அதே structure ஐ குறியாக்கும் இலகுரக plain-text வடிவம். GitHub Flavored Markdown (GFM) tables, strikethrough, task lists மற்றும் autolinks உடன் original CommonMark spec ஐ விரிவாக்குகிறது. HTML ஐ Markdown க்கு மாற்றுவது rendered அல்லது exported HTML ஐ editable plain-text Markdown ஆக திரும்பப் பெறுகிறது — CMS இலிருந்து content migration அல்லது README பராமரிப்புக்கு தேவையானது இதுதான்.

வெளியீட்டில் எந்த GitHub Flavored Markdown features ஆதரிக்கப்படுகின்றன?

Bundled turndown@7.2.0 engine turndown-plugin-gfm extension உடன் உங்கள் HTML இலிருந்து முழு GFM superset வெளியிடுகிறது: <h1>–<h6> இலிருந்து ATX-style headings # முதல் ###### வரை, nesting உடன் ordered மற்றும் unordered lists, bold **text** மற்றும் italic *text*, <del> இலிருந்து strikethrough ~~text~~, inline links [text](url) மற்றும் images ![alt](src), language hints உடன் fenced code blocks (```js), inline code spans `code`, <table> இலிருந்து pipe tables, checkbox inputs இலிருந்து GFM task lists - [ ] / - [x], blockquotes >, மற்றும் horizontal rules ---. Preview pane வெளியிட்ட Markdown ஐ marked@12.0.2 மூலம் மீண்டும் render செய்கிறது, தாகவே மாற்றத்தை காட்சி ரீதியாக உறுதிப்படுத்தலாம்.

HTML முதல் Markdown மாற்றம் எவ்வாறு வேலை செய்கிறது?

ஒவ்வொரு மாற்றமும் மூன்று bundled libraries பயன்படுத்தி உங்கள் உலாவியில் உள்ளூரில் இயங்குகிறது — CDN இல்லை, fetch இல்லை, telemetry இல்லை. உயர்மட்ட படிகள்:

1. Sanitize: ஒட்டப்பட்ட HTML முதலில் DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) மூலம் இயக்கப்படுகிறது, எந்த code-ம் markup இல் நடப்பதற்கு முன்பு <script> elements, ஒவ்வொரு on* event handler, மற்றும் javascript: URIs நீக்குவதற்கு. DOMPurify Mozilla MDN, Atlassian மற்றும் Microsoft 365 பயன்படுத்தும் அதே XSS sanitizer.
2. Convert: turndownService.turndown cleaned DOM நடந்து GitHub Flavored Markdown emit செய்கிறது — headings # prefixes ஆகின்றன, lists - / 1. items ஆகின்றன, <table> pipe table ஆகிறது, மற்றும் இப்படியே. Markdown read-only output <textarea> க்கு value மூலம் எழுதப்படுகிறது (ஒருபோதும் innerHTML அல்ல), தாகவே இது இயல்பாகவே பாதுகாப்பானது.
3. Render: வெளியிட்ட Markdown marked.parse மூலம் மீண்டும் parse செய்யப்பட்டு, DOMPurify மூலம் மீண்டும் sanitize செய்யப்பட்டு, preview pane இன் innerHTML க்கு assign செய்யப்படுகிறது, தாகவே Markdown எதிர்பார்த்த structure க்கு round-trip ஆகிறது என்ற காட்சி உறுதிப்படுத்தல் கிடைக்கிறது. Live mode 150 ms debounce செய்கிறது, தாகவே ஒட்டும்போது output parser ஐ thrash செய்யாமல் update ஆகிறது.

இந்த கருவியுடன் HTML ஐ Markdown க்கு ஏன் மாற்ற வேண்டும்?

• தனியுரிமை: ஒவ்வொரு sanitize, convert மற்றும் render பாஸும் உங்கள் உலாவியில் நடைபெறுகிறது. HTML — exported CMS posts, internal documentation, மற்றும் confidential page source உட்பட — எங்கள் சேவையகங்களை ஒருபோதும் அடைவதில்லை.
• Default ஆக XSS-safe: ஒட்டப்பட்ட HTML turndown அதை walk செய்வதற்கு முன்பு DOMPurify மூலம் இயக்கப்படுகிறது, மற்றும் preview pane innerHTML க்கு முன்பு ஒவ்வொரு HTML string ஐயும் மீண்டும் DOMPurify மூலம் இயக்குகிறது, தாகவே <script> tags அல்லது onerror= handlers கொண்ட markup ஒட்டுவது 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 செய்கின்றன — bundled turndown-plugin-gfm extension அவற்றை பாதுகாக்கிறது.

HTML முதல் Markdown மாற்றத்தின் பொதுவான பயன்பாடுகள் என்ன?

HTML ஐ Markdown க்கு மாற்றுவது content migration, documentation மற்றும் archiving முழுவதும் தோன்றுகிறது:

• CMS migration: Hugo / Jekyll / 11ty / Astro static-site rebuild க்கு WordPress அல்லது Ghost post ஐ HTML ஆக export செய்து Markdown க்கு மாற்றுவது. மாற்றம் heading levels, links, lists மற்றும் inline emphasis பாதுகாக்கிறது.
• README cleanup: wiki page அல்லது web article இன் rendered HTML ஐ ஒட்டி project README அல்லது docs site க்கு editable Markdown ஆக திரும்பப் பெறுவது, structure ஐ கையால் மீண்டும் தட்டச்சு செய்வதற்கு பதிலாக.
• Archiving and notes: HTML email அல்லது web clipping ஐ capture செய்து Obsidian, Notion, அல்லது plain-text knowledge base ல் சேமிக்க Markdown க்கு மாற்றுவது — Markdown diff-friendly ஆக இருக்கிறது மற்றும் format மாற்றங்களிலிருந்து தப்பிக்கிறது.

HTML முதல் Markdown எடுத்துக்காட்டு எப்படி இருக்கும்?

<h2>Heading</h2><ul><li>a</li><li>b<ul><li>nested</li></ul></li></ul> ஒட்டுவது ## Heading, nested bullet list உடன் Markdown மற்றும் அதே nested structure க்கு re-render செய்யும் preview pane உருவாக்குகிறது. header row மற்றும் இரண்டு data rows கொண்ட <table> ஒட்டுவது சமான | col | col | pipe table உருவாக்குகிறது — மாற்றம் headings, lists மற்றும் tables பாதுகாக்கிறது என்று உறுதிப்படுத்துகிறது.

இந்த HTML முதல் Markdown மாற்றி முழுவதும் என் உலாவியில் இயங்குகிறதா?

ஆம். ஒவ்வொரு sanitize, convert மற்றும் render பாஸும் உங்கள் உலாவி tab க்குள் JavaScript ஆக உள்ளூரில் இயங்குகிறது. மூன்று bundled libraries — turndown@7.2.0 (turndown-plugin-gfm@1.0.2 உடன்), marked@12.0.2 மற்றும் DOMPurify@3.1.7 — பக்கத்தின் அதே origin இலிருந்து ship ஆகுகின்றன, எனவே CDN dependency இல்லை, fetch இல்லை, XMLHttpRequest இல்லை, input மீது navigator.sendBeacon இல்லை. பக்கம் load ஆன பிறகு offline ஆகவும் வேலை செய்கிறது. Exported posts, internal docs மற்றும் confidential READMEs உங்கள் சாதனத்தில் இருக்கும்.

Rendered preview pane XSS-safe ஆக இருக்குமா?

ஆம். ஒட்டப்பட்ட HTML turndown அதை walk செய்வதற்கு முன்பு DOMPurify.sanitize மூலம் இயக்கப்படுகிறது, மற்றும் innerHTML க்கு assign செய்யப்படும் ஒவ்வொரு HTML string ம் முதலில் DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) மூலம் கடக்கிறது. DOMPurify Cure53 நிர்வகிக்கும் open-source XSS sanitizer; Mozilla MDN, Atlassian மற்றும் Microsoft 365 user-supplied HTML harden செய்ய பயன்படுத்தும் அதே library. Default html profile <script> elements, ஒவ்வொரு on* event-handler attribute (onerror, onclick, etc.) மற்றும் javascript: URI schemes நீக்குகிறது. <img src=x onerror=alert(1)> ஒட்டுவது onerror attribute இல்லாத preview உருவாக்கி எந்த alert ம் fire ஆவதில்லை.

GFM tables HTML இலிருந்து மாற்றப்படுகின்றனவா?

ஆம். HTML → Markdown திசை turndown-plugin-gfm பயன்படுத்துகிறது, இது <table> nodes நடந்து சமான pipe-table Markdown emit செய்யும் custom turndown rule சேர்க்கிறது — header row, |---|---| alignment row, பிறகு data rows. பெரும்பாலான online converters இந்த path ல் tables drop செய்கின்றன — இது அவற்றை பாதுகாக்கிறது. Strikethrough (<del>text</del> → ~~text~~) மற்றும் task lists (<input type="checkbox"> → - [ ] / - [x]) அதே வழியில் மாற்றப்படுகின்றன.

என் HTML தூய்மையாக மாறுமா?

Canonical GFM feature set க்கு — headings h1 முதல் h6 வரை, nesting உடன் ordered மற்றும் unordered lists, bold / italic / strikethrough, inline links, inline images, language tags உடன் fenced code blocks, inline code spans, pipe tables, task lists, blockquotes, horizontal rules மற்றும் autolinks — மாற்றம் சுத்தமாகவும் கணிக்கக்கூடியதாகவும் உள்ளது. Edge cases: HTML comments (<!-- ... -->) நீக்கப்படுகின்றன (Markdown ல் comment syntax இல்லை); inline styling மற்றும் class attributes நீக்கப்படுகின்றன ஏனெனில் Markdown ல் சமான இல்லை; மற்றும் <sub> / <sup> போன்ற அசாதாரண inline tags plain text ஆக மாற்றப்படுகின்றன. இவை documented turndown behaviours, bugs அல்ல.

Fenced code blocks ல் syntax highlighting ஆதரிக்கப்படுகிறதா?

v1 ல் இல்லை. Fenced code blocks monospaced font மற்றும் subtle background உடன் render ஆகுகின்றன ஆனால் per-language token highlighting இல்லாமல். Syntax highlighting சேர்க்க Prism அல்லது highlight.js bundle செய்ய வேண்டும், ஒவ்வொன்றும் 15–40 KB plus per-language grammar கோப்பு சேர்க்கிறது. இப்போதைக்கு, renderer correctness மற்றும் XSS-safety மீது கவனம் செலுத்துகிறது; user demand இருந்தால் opt-in toggle tractable follow-up.

இந்த HTML முதல் Markdown மாற்றி அதே origin ல் bundle செய்யப்பட்ட turndown@7.2.0 (+ turndown-plugin-gfm@1.0.2), marked@12.0.2 மற்றும் DOMPurify@3.1.7 உடன் ship ஆகிறது, முழு GFM feature set வெளியிடுகிறது, மற்றும் DOM ஐ தொடுவதற்கு முன்பு ஒவ்வொரு rendered HTML string ஐயும் sanitize செய்கிறது. பதிவேற்றம் இல்லை, CDN இல்லை, telemetry இல்லை — ஒவ்வொரு byte உம் உங்கள் உலாவியில் இருக்கும்.