HTML నుండి Markdown కన్వర్టర్ — ఆన్‌లైన్‌లో HTML ని Markdown కి మార్చండి _

HTML నుండి Markdown మార్పిడి అంటే ఏమిటి?

HTML బ్రౌజర్ ప్రదర్శించే రెండర్ చేసిన markup — <h1>, <ul>, <table>, <a>, మరియు మిగిలినవి. Markdown అనేది తేలికపాటి సాదా-వచన ఫార్మాట్ ఇది కనీస విరామ చిహ్నాలు (# హెడింగ్‌లకు, * ఎంఫాసిస్‌కు, - లిస్ట్ ఐటెమ్‌లకు) ఉపయోగించి అదే నిర్మాణాన్ని ఎన్‌కోడ్ చేస్తుంది. GitHub Flavored Markdown (GFM) అసలు CommonMark స్పెక్‌ను టేబుల్‌లు, స్ట్రైక్‌త్రూ, టాస్క్ లిస్ట్‌లు, మరియు ఆటోలింక్‌లతో విస్తరిస్తుంది. HTML ని Markdown కి మార్చడం రెండర్ చేసిన లేదా ఎగుమతి చేసిన HTML ని సవరించదగిన సాదా-వచన Markdown లోకి తీసుకొస్తుంది — CMS నుండి కంటెంట్ మైగ్రేషన్ లేదా README క్లీన్‌అప్‌కు అవసరమైనది ఇదే.

ఆట్‌పుట్‌లో ఏ GitHub Flavored Markdown ఫీచర్లు సపోర్ట్ చేయబడతాయి?

బండిల్ చేసిన turndown@7.2.0 ఇంజిన్ turndown-plugin-gfm ఎక్స్‌టెన్షన్‌తో మీ HTML నుండి పూర్తి GFM సూపర్‌సెట్ నిర్గమిస్తుంది: <h1>–<h6> నుండి ATX-స్టైల్ హెడింగ్‌లు # నుండి ######, నెస్టింగ్‌తో ఆర్డర్డ్ మరియు అన్‌ఆర్డర్డ్ లిస్ట్‌లు, బోల్డ్ **text** మరియు ఇటాలిక్ *text*, <del> నుండి స్ట్రైక్‌త్రూ ~~text~~, ఇన్‌లైన్ లింక్‌లు [text](url) మరియు ఇమేజ్‌లు ![alt](src), లాంగ్వేజ్ హింట్‌లతో ఫెన్స్డ్ కోడ్ బ్లాక్‌లు (```js), ఇన్‌లైన్ కోడ్ స్పాన్‌లు `code`, <table> నుండి పైప్ టేబుల్‌లు, checkbox ఇన్‌పుట్‌ల నుండి GFM టాస్క్ లిస్ట్‌లు - [ ] / - [x], బ్లాక్‌కోట్‌లు >, మరియు హారిజాంటల్ రూల్‌లు ---. ప్రివ్యూ పేన్ నిర్గమించిన Markdown ని marked@12.0.2 తో పునః రెండర్ చేస్తుంది తద్వారా రూపాంతరణను దృశ్యంగా నిర్ధారించవచ్చు.

HTML నుండి Markdown మార్పిడి ఎలా పనిచేస్తుంది?

ప్రతి మార్పిడి మూడు బండిల్ చేసిన లైబ్రరీలు ఉపయోగించి మీ బ్రౌజర్‌లో స్థానికంగా నడుస్తుంది — CDN లేదు, fetch లేదు, టెలిమెట్రీ లేదు. ఉన్నత-స్థాయి దశలు:

1. శుద్ధి: పేస్ట్ చేసిన HTML ముందు DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) ద్వారా నడిపించబడుతుంది ఏ కోడ్ markup లో నడవడానికి ముందే <script> ఎలిమెంట్‌లు, ప్రతి on* ఈవెంట్ హ్యాండ్లర్, మరియు javascript: URIs తీసివేయడానికి. DOMPurify Mozilla MDN, Atlassian, మరియు Microsoft 365 ఉపయోగించే అదే XSS సానిటైజర్.
2. రూపాంతరణ: turndownService.turndown శుద్ధి చేసిన DOM ని వాక్ చేసి GitHub Flavored Markdown నిర్గమిస్తుంది — హెడింగ్‌లు # ప్రిఫిక్స్ అవుతాయి, లిస్ట్‌లు - / 1. ఐటెమ్‌లు అవుతాయి, <table> పైప్ టేబుల్ అవుతుంది, మొదలైనవి. Markdown read-only ఔట్‌పుట్ <textarea> కు value ద్వారా వ్రాయబడుతుంది (ఎప్పుడూ innerHTML కాదు), కాబట్టి ఇది స్వాభావికంగా సురక్షితం.
3. రెండర్: నిర్గమించిన Markdown ని marked.parse ద్వారా పునః పార్స్ చేస్తారు, DOMPurify ద్వారా మళ్ళీ శుద్ధి చేస్తారు, మరియు ప్రివ్యూ పేన్ యొక్క innerHTML కు అసైన్ చేస్తారు తద్వారా Markdown ఆశించిన నిర్మాణానికి round-trip అవుతుందని దృశ్య నిర్ధారణ లభిస్తుంది. లైవ్ మోడ్ 150 ms ఇన్‌పుట్ డీబౌన్స్ చేస్తుంది కాబట్టి పేస్ట్ చేస్తున్నప్పుడు ఔట్‌పుట్ పార్సర్‌ను త్రాష్ చేయకుండా అప్‌డేట్ అవుతుంది.

ఈ టూల్‌తో HTML ని Markdown కి ఎందుకు మార్చాలి?

• గోప్యత: ప్రతి శుద్ధి, రూపాంతరణ, మరియు రెండర్ పాస్ మీ బ్రౌజర్‌లో జరుగుతుంది. HTML — ఎగుమతి చేసిన CMS పోస్ట్‌లు, ఇంటర్నల్ డాక్యుమెంటేషన్, మరియు గోప్యమైన పేజీ సోర్స్ సహా — మా సర్వర్‌లకు చేరదు.
• డిఫాల్ట్‌గా XSS-సురక్షితం: పేస్ట్ చేసిన HTML turndown దాన్ని వాక్ చేయడానికి ముందు DOMPurify ద్వారా నడిపించబడుతుంది, మరియు ప్రివ్యూ పేన్ innerHTML కు ముందు ప్రతి HTML స్ట్రింగ్‌ను మళ్ళీ DOMPurify ద్వారా నడిపిస్తుంది, కాబట్టి <script> ట్యాగ్‌లు లేదా onerror= హ్యాండ్లర్లు కలిగిన markup పేస్ట్ చేయడం ఇనర్ట్ ప్రివ్యూ మరియు పరిశుభ్రమైన Markdown ఉత్పత్తి చేస్తుంది.
• GFM-కంప్లీట్: <table> ఎలిమెంట్‌లు Markdown పైప్ టేబుల్‌లుగా మారతాయి, <del> స్ట్రైక్‌త్రూగా, మరియు checkbox లిస్ట్‌లు GFM టాస్క్ లిస్ట్‌లుగా. చాలా ఆన్‌లైన్ కన్వర్టర్లు HTML → Markdown పాత్‌లో టేబుల్‌లు వదలేస్తాయి — బండిల్ చేసిన turndown-plugin-gfm ఎక్స్‌టెన్షన్ వాటిని సంరక్షిస్తుంది.

HTML నుండి Markdown మార్పిడి యొక్క సాధారణ అప్లికేషన్లు ఏమిటి?

HTML ని Markdown కి మార్చడం కంటెంట్ మైగ్రేషన్, డాక్యుమెంటేషన్, మరియు ఆర్కైవింగ్‌లో కనిపిస్తుంది:

• CMS మైగ్రేషన్: Hugo / Jekyll / 11ty / Astro స్టాటిక్-సైట్ రీబిల్డ్ కోసం WordPress లేదా Ghost పోస్ట్‌ను HTML గా ఎగుమతి చేసి Markdown కి మార్చడం. రూపాంతరణ హెడింగ్ స్థాయిలు, లింక్‌లు, లిస్ట్‌లు, మరియు ఇన్‌లైన్ ఎంఫాసిస్ సంరక్షిస్తుంది.
• README క్లీన్‌అప్: వికీ పేజీ లేదా వెబ్ ఆర్టికల్ యొక్క రెండర్ చేసిన HTML పేస్ట్ చేసి దాన్ని ప్రోజెక్ట్ README లేదా డాక్స్ సైట్ కోసం సవరించదగిన Markdown కి తీసుకొచ్చి, నిర్మాణాన్ని మళ్ళీ చేతితో టైప్ చేయడానికి బదులుగా.
• ఆర్కైవింగ్ మరియు నోట్స్: HTML ఈమెయిల్ లేదా వెబ్ క్లిప్పింగ్ ని కాప్చర్ చేసి Obsidian, Notion, లేదా సాదా-వచన నాలెడ్జ్ బేస్‌లో నిల్వ చేయడానికి Markdown కి మార్చడం — Markdown డిఫ్-ఫ్రెండ్లీగా ఉంటుంది మరియు ఫార్మాట్ మార్పులను తట్టుకుంటుంది.

HTML నుండి Markdown ఉదాహరణ ఎలా కనిపిస్తుంది?

<h2>Heading</h2><ul><li>a</li><li>b<ul><li>nested</li></ul></li></ul> పేస్ట్ చేయడం ## Heading, నెస్టెడ్ బుల్లెట్ లిస్ట్‌తో Markdown మరియు అదే నెస్టెడ్ నిర్మాణానికి పునః రెండర్ అవుతున్న ప్రివ్యూ పేన్ ఉత్పత్తి చేస్తుంది. హెడర్ రో మరియు రెండు డేటా రోలతో <table> పేస్ట్ చేయడం సమానమైన | col | col | పైప్ టేబుల్ ఉత్పత్తి చేస్తుంది — రూపాంతరణ హెడింగ్‌లు, లిస్ట్‌లు, మరియు టేబుల్‌లు సంరక్షిస్తుందని నిర్ధారిస్తుంది.

ఈ HTML నుండి Markdown కన్వర్టర్ పూర్తిగా నా బ్రౌజర్‌లో నడుస్తుందా?

అవును. ప్రతి శుద్ధి, రూపాంతరణ, మరియు రెండర్ పాస్ మీ బ్రౌజర్ ట్యాబ్‌లో JavaScript గా స్థానికంగా నడుస్తుంది. మూడు బండిల్ చేసిన లైబ్రరీలు — turndown@7.2.0 (turndown-plugin-gfm@1.0.2 తో), marked@12.0.2, మరియు DOMPurify@3.1.7 — పేజీ మాదిరిగానే అదే ఆరిజిన్ నుండి షిప్ చేయబడతాయి, కాబట్టి CDN డిపెండెన్సీ లేదు, fetch, XMLHttpRequest, ఇన్‌పుట్‌పై navigator.sendBeacon ఏదీ లేదు. పేజీ లోడ్ అయిన తర్వాత ఆఫ్‌లైన్‌లో కూడా పని చేస్తుంది. ఎగుమతి పోస్ట్‌లు, ఇంటర్నల్ డాక్స్, మరియు గోప్యమైన READMEs మీ డివైస్‌లో ఉంటాయి.

రెండర్ చేసిన ప్రివ్యూ పేన్ XSS-సురక్షితంగా ఉంటుందా?

అవును. పేస్ట్ చేసిన HTML turndown దాన్ని వాక్ చేయడానికి ముందు DOMPurify.sanitize ద్వారా నడుస్తుంది, మరియు innerHTML కు అసైన్ చేయబడిన ప్రతి HTML స్ట్రింగ్ మొదట DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) ద్వారా పాస్ అవుతుంది. DOMPurify అనేది Cure53 నిర్వహించే ఓపెన్-సోర్స్ XSS సానిటైజర్; ఇది Mozilla MDN, Atlassian, మరియు Microsoft 365 వినియోగదారు-సరఫరా చేసిన HTML హార్డెన్ చేయడానికి ఉపయోగించే అదే లైబ్రరీ. డిఫాల్ట్ html ప్రొఫైల్ <script> ఎలిమెంట్‌లు, ప్రతి on* ఈవెంట్-హ్యాండ్లర్ అట్రిబ్యూట్ (onerror, onclick, మొ.), javascript: URI స్కీమ్‌లు, మరియు తెలిసిన-ప్రమాదకరమైన CSS ఎక్స్‌ప్రెషన్‌లు తీసివేస్తుంది. <img src=x onerror=alert(1)> పేస్ట్ చేయడం ప్రివ్యూ ఉత్పత్తి చేస్తుంది ఇక్కడ document.querySelector('#output-preview img[onerror]') null తిరిగి ఇస్తుంది మరియు అలర్ట్ ఫైర్ కాదు.

GFM టేబుల్‌లు HTML నుండి రూపాంతరించబడతాయా?

అవును. HTML → Markdown దిశ turndown-plugin-gfm ఉపయోగిస్తుంది, ఇది <table> నోడ్‌లు వాక్ చేసి సమానమైన పైప్-టేబుల్ Markdown నిర్గమించే కస్టమ్ టర్న్‌డౌన్ రూల్ జోడిస్తుంది — హెడర్ రో, |---|---| అలైన్‌మెంట్ రో, తర్వాత డేటా రోలు. చాలా ఆన్‌లైన్ కన్వర్టర్లు ఈ పాత్‌లో టేబుల్‌లు వదలేస్తాయి — ఇది వాటిని సంరక్షిస్తుంది. స్ట్రైక్‌త్రూ (<del>text</del> → ~~text~~) మరియు టాస్క్ లిస్ట్‌లు (<input type="checkbox"> → - [ ] / - [x]) అదే విధంగా రూపాంతరించబడతాయి.

నా HTML పరిశుభ్రంగా రూపాంతరించబడుతుందా?

కానోనికల్ GFM ఫీచర్ సెట్ కోసం — హెడింగ్‌లు h1 నుండి h6, నెస్టింగ్‌తో ఆర్డర్డ్ మరియు అన్‌ఆర్డర్డ్ లిస్ట్‌లు, బోల్డ్ / ఇటాలిక్ / స్ట్రైక్‌త్రూ, ఇన్‌లైన్ లింక్‌లు, ఇన్‌లైన్ ఇమేజ్‌లు, లాంగ్వేజ్ ట్యాగ్‌లతో ఫెన్స్డ్ కోడ్ బ్లాక్‌లు, ఇన్‌లైన్ కోడ్ స్పాన్‌లు, పైప్ టేబుల్‌లు, టాస్క్ లిస్ట్‌లు, బ్లాక్‌కోట్‌లు, హారిజాంటల్ రూల్‌లు, మరియు ఆటోలింక్‌లు — రూపాంతరణ పరిశుభ్రంగా మరియు అంచనాగా ఉంటుంది. ఎడ్జ్ కేసులు: HTML కామెంట్లు (<!-- ... -->) తీసివేయబడతాయి (Markdown లో కామెంట్ సింటాక్స్ లేదు); ఇన్‌లైన్ స్టైలింగ్ మరియు క్లాస్ అట్రిబ్యూట్‌లు తీసివేయబడతాయి ఎందుకంటే Markdown లో సమానమైనది లేదు; మరియు అసాధారణ ఇన్‌లైన్ ట్యాగ్‌లు <sub> / <sup> వంటివి సాదా వచనంగా మారుతాయి. ఇవి బగ్‌లు కాదు, డాక్యుమెంట్ చేయబడిన turndown ప్రవర్తనలు.

ఫెన్స్డ్ కోడ్ బ్లాక్‌లలో సింటాక్స్ హైలైటింగ్ సపోర్ట్ చేయబడుతుందా?

v1 లో లేదు. ఫెన్స్డ్ కోడ్ బ్లాక్‌లు మోనోస్పేస్డ్ ఫాంట్ మరియు సూక్ష్మమైన నేపథ్యంతో రెండర్ అవుతాయి కానీ పర్-లాంగ్వేజ్ టోకెన్ హైలైటింగ్ లేకుండా. సింటాక్స్ హైలైటింగ్ జోడించడానికి Prism లేదా highlight.js బండిల్ చేయాల్సి ఉంటుంది, వాటిలో ప్రతిది 15–40 KB జోడిస్తుంది. ప్రస్తుతానికి, రెండరర్ కరెక్ట్‌నెస్ మరియు XSS-సేఫ్టీపై దృష్టి పెడుతుంది; ఇన్‌లైన్ హైలైటింగ్ కోసం వినియోగదారు డిమాండ్ ఉంటే, ఆప్ట్-ఇన్ టోగుల్ సాధ్యమైన ఫాలో-అప్.

ఈ HTML నుండి Markdown కన్వర్టర్ అదే ఆరిజిన్ వద్ద బండిల్ చేసిన turndown@7.2.0 (+ turndown-plugin-gfm@1.0.2), marked@12.0.2, మరియు DOMPurify@3.1.7 తో షిప్ చేస్తుంది, పూర్తి GFM ఫీచర్ సెట్ నిర్గమిస్తుంది, మరియు ప్రతి రెండర్ చేసిన HTML స్ట్రింగ్‌ను DOM తాకడానికి ముందు శుద్ధి చేస్తుంది. అప్‌లోడ్ లేదు, CDN లేదు, టెలిమెట్రీ లేదు — ప్రతి బైట్ మీ బ్రౌజర్‌లో ఉంటుంది.