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

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

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

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

బండిల్ చేసిన marked@12.0.2 పార్సర్ పూర్తి GFM సూపర్‌సెట్ సపోర్ట్ చేస్తుంది: ATX-స్టైల్ హెడింగ్‌లు # నుండి ######, నెస్టింగ్‌తో ఆర్డర్డ్ మరియు అన్‌ఆర్డర్డ్ లిస్ట్‌లు, బోల్డ్ **text** మరియు ఇటాలిక్ *text*, స్ట్రైక్‌త్రూ ~~text~~, ఇన్‌లైన్ లింక్‌లు [text](url) మరియు ఇన్‌లైన్ ఇమేజ్‌లు ![alt](src), ఐచ్ఛిక లాంగ్వేజ్ ట్యాగ్‌లతో ఫెన్స్డ్ కోడ్ బ్లాక్‌లు (```js), ఇన్‌లైన్ కోడ్ స్పాన్‌లు `code`, హెడర్ రోలతో పైప్ టేబుల్‌లు, GFM టాస్క్ లిస్ట్‌లు - [ ] / - [x], బ్లాక్‌కోట్‌లు >, హారిజాంటల్ రూల్‌లు ---, మరియు ఆటోలింక్‌లు. ప్రతి ఒక్కటి ప్రివ్యూ పానెల్‌లో GitHub రెండర్ చేసే విధంగానే రెండర్ అవుతుంది.

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

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

1. పార్స్: marked.parse(source) మీ Markdown చదివి HTML స్ట్రింగ్ ఉత్పత్తి చేస్తుంది. పార్సర్ GFM మోడ్‌లో నడుస్తుంది, కాబట్టి టేబుల్‌లు, టాస్క్ లిస్ట్‌లు, స్ట్రైక్‌త్రూ, మరియు ఆటోలింక్‌లు అన్నీ గుర్తించబడతాయి.
2. శుద్ధి: HTML ఔట్‌పుట్ innerHTML కు అసైన్ చేయడానికి ముందు DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) ద్వారా నడిపించబడుతుంది. DOMPurify అనేది Mozilla MDN, Atlassian, మరియు Microsoft 365 ఉపయోగించే అదే XSS సానిటైజర్ — ఇది HTML పార్స్ చేస్తుంది, DOM వాక్ చేస్తుంది, మరియు <script> ఎలిమెంట్‌లు, ప్రతి on* ఈవెంట్ హ్యాండ్లర్ అట్రిబ్యూట్, మరియు javascript: URI స్కీమ్‌లు తీసివేస్తుంది.
3. రెండర్: శుద్ధి చేసిన HTML innerHTML ద్వారా ప్రివ్యూ పానెల్‌కు వ్రాయబడుతుంది, మరియు రా HTML రెండవ పానెల్‌లో read-only <textarea> ద్వారా చూపించబడుతుంది కాబట్టి మీరు markup కాపీ చేయవచ్చు. లైవ్ మోడ్ 150 ms ఇన్‌పుట్ డీబౌన్స్ చేస్తుంది కాబట్టి మీరు టైప్ చేస్తున్నప్పుడు ప్రివ్యూ పార్సర్‌ను త్రాష్ చేయకుండా అప్‌డేట్ అవుతుంది.

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

• గోప్యత: ప్రతి పార్స్, శుద్ధి, మరియు రెండర్ పాస్ మీ బ్రౌజర్‌లో జరుగుతుంది. Markdown — విడుదలకు ముందు బ్లాగ్ పోస్ట్‌లు, ఇంటర్నల్ డాక్యుమెంటేషన్ డ్రాఫ్ట్‌లు, మరియు గోప్యమైన README కంటెంట్ సహా — మా సర్వర్‌లకు చేరదు.
• డిఫాల్ట్‌గా XSS-సురక్షితం: రెండర్ చేసిన ప్రివ్యూ పానెల్ ప్రతి HTML స్ట్రింగ్‌ను innerHTML కు ముందు DOMPurify ద్వారా నడిపిస్తుంది, కాబట్టి మీ Markdown లో కచ్చా <script> ట్యాగ్‌లు లేదా onerror= హ్యాండ్లర్లు ఉన్నా ఇనర్ట్ ప్రివ్యూ ఉత్పత్తి అవుతుంది. రా ట్యాబ్ పరిశీలన కోసం అశుద్ధీకరించిన స్ట్రింగ్ చూపిస్తుంది కానీ అది read-only <textarea> లో value ద్వారా ఉంటుంది — ఎప్పుడూ నిర్వహించబడదు.
• GFM-కంప్లీట్: టేబుల్‌లు, స్ట్రైక్‌త్రూ, టాస్క్ లిస్ట్‌లు, మరియు ఆటోలింక్‌లు GitHub రెండర్ చేసే విధంగానే రెండర్ అవుతాయి. Markdown పైప్-టేబుల్ <thead> మరియు <tbody> తో HTML <table> గా మారుతుంది — పడిపోయిన రోలు లేవు, చదపటి స్ట్రక్చర్ లేదు.

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

Markdown ని HTML కి మార్చడం డాక్యుమెంటేషన్, స్టాటిక్-సైట్ పని, మరియు ఇమెయిల్ రచన అంతటా కనిపిస్తుంది:

• GitHub README రచన: Markdown లో ప్రాజెక్ట్ README స్థానికంగా రూపొందించి పుష్ చేయడానికి ముందు రెండర్ HTML ప్రివ్యూ చేయడం. ప్రివ్యూ టేబుల్‌లు, టాస్క్ లిస్ట్‌లు, మరియు ఫెన్స్డ్ కోడ్ కోసం GitHub GFM రెండరర్‌కు సరిపోలుతుంది.
• స్టాటిక్-సైట్ కంటెంట్: Markdown పోస్ట్ పేస్ట్ చేసి Markdown సోర్స్ కాకుండా markup అపేక్షించే CMS ఫీల్డ్ లేదా టెంప్లేటింగ్ ఇంజిన్ కోసం HTML తీసుకోవడం.
• ఇమెయిల్ టెంప్లేట్‌లు: ట్రాన్సాక్షనల్-ఇమెయిల్ బాడీని Markdown గా రచించి ఇమెయిల్ సర్వీస్ ప్రొవైడర్ యొక్క టెంప్లేటింగ్ ఇంజిన్ కోసం HTML కి మార్చడం. ఔట్‌పుట్ సాదా సెమాంటిక్ HTML — ఇన్‌లైన్ స్టైల్‌లు లేవు, ఇమెయిల్-క్లయింట్ క్విర్క్‌లు జోడించబడలేదు.

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

# Title\n\n- item 1\n- item 2\n\n[link](https://example.com) పేస్ట్ చేయడం <h1>Title</h1>, రెండు-ఐటెమ్ అన్‌ఆర్డర్డ్ లిస్ట్, మరియు <a href="https://example.com">link</a> కలిగిన ప్రివ్యూ పానెల్ ఉత్పత్తి చేస్తుంది. రా పానెల్ ఖచ్చితమైన HTML స్ట్రింగ్ చూపిస్తుంది కాబట్టి మీరు నేరుగా టెంప్లేట్‌లో కాపీ చేయవచ్చు. |---|---| అలైన్‌మెంట్ రో తో పైప్ టేబుల్ <thead> మరియు <tbody> తో పూర్తి <table> అవుతుంది — GFM టేబుల్‌లు GitHub రెండర్ చేసే విధంగానే రెండర్ అవుతాయని నిర్ధారిస్తుంది.

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

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

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

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

GFM టేబుల్‌లు సపోర్ట్ చేయబడతాయా?

అవును. Markdown → HTML దిశ marked GFM మోడ్ ద్వారా నేటివ్‌గా పైప్ టేబుల్‌లు నిర్వహిస్తుంది — |---|---| అలైన్‌మెంట్ రో ద్వారా వేరు చేయబడిన హెడర్ రో, తర్వాత డేటా రోలు, <thead> + <tbody> తో <table> ఉత్పత్తి చేస్తుంది. స్ట్రైక్‌త్రూ (~~text~~ → <del>text</del>) మరియు టాస్క్ లిస్ట్‌లు (- [ ] / - [x] → <input type="checkbox">) GitHub రెండర్ చేసే విధంగానే రెండర్ అవుతాయి.

నా Markdown సరిగ్గా మారుతుందా?

కానోనికల్ GFM ఫీచర్ సెట్ కోసం — హెడింగ్‌లు h1 నుండి h6, నెస్టింగ్‌తో ఆర్డర్డ్ మరియు అన్‌ఆర్డర్డ్ లిస్ట్‌లు, బోల్డ్ / ఇటాలిక్ / స్ట్రైక్‌త్రూ, ఇన్‌లైన్ లింక్‌లు, ఇన్‌లైన్ ఇమేజ్‌లు, లాంగ్వేజ్ ట్యాగ్‌లతో ఫెన్స్డ్ కోడ్ బ్లాక్‌లు, ఇన్‌లైన్ కోడ్ స్పాన్‌లు, పైప్ టేబుల్‌లు, టాస్క్ లిస్ట్‌లు, బ్లాక్‌కోట్‌లు, హారిజాంటల్ రూల్‌లు, మరియు ఆటోలింక్‌లు — HTML ఔట్‌పుట్ స్థిరంగా ఉంటుంది మరియు GitHub రెండరర్‌కు సరిపోలుతుంది. కొన్ని గమనించదగిన ప్రవర్తనలు: Markdown లో రా ఇన్‌లైన్ HTML (ఉదా. <sub>text</sub>) ఔట్‌పుట్‌లో మార్పు లేకుండా పాస్ అవుతుంది, మరియు CommonMark setext హెడింగ్‌లు (=== అండర్‌లైన్‌లు) మరియు ATX హెడింగ్‌లు (# Title) రెండూ అదే <h1> ఉత్పత్తి చేస్తాయి. ఇవి బగ్‌లు కాదు, డాక్యుమెంట్ చేయబడిన marked ప్రవర్తనలు. వ్యతిరేక దిశ కావాలంటే HTML నుండి Markdown టూల్ వాడండి.

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

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

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