Kibadilishaji Markdown hadi HTML — Badilisha Markdown hadi HTML Mtandaoni _

Ubadilishaji wa Markdown hadi HTML ni nini?

Markdown ni muundo wa maandishi wazi mwepesi unaotumia alama za chini (# kwa vichwa, * kwa msisitizo, - kwa vipengele vya orodha) kusimba prose yenye muundo. GitHub Flavored Markdown (GFM) inapanua uainishi asili wa CommonMark na meza, kufuta, orodha za kazi, na viungo vya kiotomati. HTML ni fomu iliyoundwa ambayo kivinjari huonyesha. Kubadilisha Markdown kuwa HTML hukuruhusu kuandaa katika sintaksia nyepesi na kusafirisha kwa uso ulioundwa — README, ukurasa wa tovuti ya statiki, au mwili wa barua pepe — bila kuandika lebo kwa mkono.

Vipengele vipi vya GitHub Flavored Markdown vinasaidiwa?

Mchanganuzi wa marked@12.0.2 uliofungwa unasaidia superset kamili ya GFM: vichwa vya mtindo wa ATX # hadi ######, orodha zilizopangwa na zisizopangwa na uwekaji wa ndani, ujasiri **maandishi** na italiki *maandishi*, kufuta ~~maandishi~~, viungo vya ndani [maandishi](url) na picha za ndani ![alt](src), bloku za msimbo zilizofungwa na lebo za lugha za hiari (```js), vipande vya msimbo wa ndani `msimbo`, meza za bomba na safu za kichwa, orodha za kazi za GFM - [ ] / - [x], nukuu za kizuizi >, sheria za usawa ---, na viungo vya kiotomati. Kila kipengele kinaundwa katika kidirisha cha muhtasari kwa njia ile ile GitHub inavyounda.

Ubadilishaji wa Markdown hadi HTML unafanya kazi vipi?

Kila ubadilishaji hufanyika nchini kwenye kivinjari chako ukitumia maktaba mbili zilizofungwa — hakuna CDN, hakuna fetch, hakuna telemetri. Hatua kuu ni:

1. Chambua: marked.parse(chanzo) inasoma Markdown yako na huzalisha mfuatano wa HTML. Mchanganuzi huendesha katika hali ya GFM, kwa hivyo meza, orodha za kazi, kufuta, na viungo vya kiotomati vinatambuliwa.
2. Safisha: matokeo ya HTML hupita kupitia DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) kabla ya kuwekwa kwa innerHTML. DOMPurify ni kisafishi kile kile cha XSS kinachotumiwa na Mozilla MDN, Atlassian, na Microsoft 365 — huchanganua HTML, hutembea DOM, na kuondoa vipengele vya <script>, kila sifa ya kishiki cha on*, na mipango ya URI ya javascript:.
3. Unda: HTML iliyosafishwa inaandikwa kwenye kidirisha cha muhtasari kupitia innerHTML, na HTML ghafi inaonyeshwa katika kidirisha cha pili kupitia <textarea> ya kusoma tu ili uweze kunakili markup. Hali ya moja kwa moja inasimama ingizo kwa ms 150 ili muhtasari usasishe unapoandika bila kusumbua mchanganuzi.

Kwa nini ubadilishe Markdown hadi HTML na zana hii?

• Faragha: kila upitio wa uchambuzi, usafi, na uundaji hufanyika kwenye kivinjari chako. Markdown — ikijumuisha machapisho ya blogu ambayo hayajatolewa, rasimu za nyaraka za ndani, na maudhui ya README ya siri — haifiki seva zetu kamwe.
• Salama dhidi ya XSS kwa chaguo-msingi: kidirisha cha muhtasari ulioundwa hupitisha kila mfuatano wa HTML kupitia DOMPurify kabla ya innerHTML, kwa hivyo lebo ya <script> au kishiki cha onerror= kilichopotea katika HTML ghafi katika Markdown yako kinazalisha muhtasari usio na madhara. Kichupo ghafi kinaonyesha matokeo ambayo hayajasafishwa kwa ukaguzi — yanakaa ndani ya <textarea> kupitia value na hayatekelezwi kamwe.
• Kamili kwa GFM: meza, kufuta, orodha za kazi, na viungo vya kiotomati vinaundwa kwa njia ile ile GitHub inavyounda. Meza ya bomba ya Markdown inakuwa <table> ya HTML na <thead> na <tbody> — hakuna safu zinazopotea, hakuna muundo unaopigwa gorofa.

Matumizi ya kawaida ya ubadilishaji wa Markdown hadi HTML ni yapi?

Kubadilisha Markdown kuwa HTML kunaonekana katika nyaraka, kazi za tovuti ya statiki, na uandishi wa barua pepe:

• Kuandaa README ya GitHub: kuandaa README ya mradi nchini kama Markdown na kuona muhtasari wa HTML iliyoundwa kabla ya kutuma. Muhtasari unalingana na mpangaji wa GFM wa GitHub kwa meza, orodha za kazi, na msimbo uliofungwa.
• Maudhui ya tovuti ya statiki: kubandika chapisho la Markdown na kupata HTML kwa sehemu ya CMS au injini ya kutemplate inayotarajia markup badala ya chanzo cha Markdown.
• Violezo vya barua pepe: kuandika mwili wa barua pepe ya muamala kama Markdown na kubadilisha kuwa HTML kwa injini ya kutemplate ya mtoa huduma wa barua pepe. Matokeo ni HTML safi ya kisemantiki — bila mitindo ya ndani, bila udhaifu wa mteja wa barua pepe uliopakiwa.

Mfano wa ubadilishaji wa Markdown hadi HTML unaonekanaje?

Kubandika # Kichwa\n\n- kipengele 1\n- kipengele 2\n\n[kiungo](https://example.com) kunazalisha kidirisha cha muhtasari chenye <h1>Kichwa</h1>, orodha isiyopangwa ya vipengele viwili, na <a href="https://example.com">kiungo</a>. Kichupo ghafi kinaonyesha mfuatano kamili wa HTML ili uweze kuunakili moja kwa moja kwenye template. Meza ya bomba na safu ya urambazaji ya |---|---| inakuwa <table> kamili na <thead> na <tbody> — ikithibitisha kwamba meza za GFM zinaundwa kwa njia ile ile GitHub inavyounda.

Je, kibadilishaji hiki cha Markdown hadi HTML kinafanya kazi kabisa kwenye kivinjari changu?

Ndiyo. Kila upitio wa uchambuzi, usafi, na uundaji hufanyika nchini kama JavaScript ndani ya kichupo cha kivinjari chako. Maktaba mbili zilizofungwa — marked@12.0.2 na DOMPurify@3.1.7 — zinasafirisha kutoka asili ile ile kama ukurasa, kwa hivyo hakuna utegemezi wa CDN, hakuna fetch, hakuna XMLHttpRequest, hakuna navigator.sendBeacon kwenye ingizo. Zana pia inafanya kazi nje ya mtandao baada ya ukurasa kupakia. Machapisho ambayo hayajatolewa, nyaraka za ndani, na README za siri hubaki kwenye kifaa chako.

Je, kidirisha cha muhtasari ulioundwa ni salama dhidi ya XSS?

Ndiyo. Kila mfuatano wa HTML unaopewa kwa innerHTML hupita kwanza kupitia DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }). DOMPurify ni kisafishi cha chanzo wazi cha XSS kinachohifadhiwa na Cure53; ni maktaba ile ile inayotumiwa na Mozilla MDN, Atlassian, na Microsoft 365 kuimarisha HTML iliyotolewa na watumiaji. Mfumo wa html wa chaguo-msingi huondoa vipengele vya <script>, kila sifa ya kishiki cha matukio ya on* (onerror, onclick, n.k.), mipango ya URI ya javascript: ndani ya href / src, na misemo ya CSS inayojulikana kuwa ya hatari. Kubandika <img src=x onerror=alert(1)> kunazalisha muhtasari ambapo document.querySelector('#output-preview img[onerror]') inarudisha null na hakuna arifa inayowaka.

Je, meza za GFM zinasaidiwa?

Ndiyo. Mwelekeo wa Markdown → HTML hushughulikia meza za bomba kwa asili kupitia hali ya GFM ya marked — safu ya kichwa iliyotengwa na safu ya urambazaji ya |---|---|, ikifuatiwa na safu za data, huzalisha <table> na <thead> + <tbody>. Kufuta (~~maandishi~~ → <del>maandishi</del>) na orodha za kazi (- [ ] / - [x] → <input type="checkbox">) zinaundwa kwa njia ile ile GitHub inavyounda.

Je, Markdown yangu itabadilishwa bila hasara?

Kwa seti ya vipengele vya kawaida vya GFM — vichwa h1 hadi h6, orodha zilizopangwa na zisizopangwa na uwekaji wa ndani, ujasiri / italiki / kufuta, viungo vya ndani, picha za ndani, bloku za msimbo zilizofungwa na lebo za lugha, vipande vya msimbo wa ndani, meza za bomba, orodha za kazi, nukuu za kizuizi, sheria za usawa, na viungo vya kiotomati — matokeo ya HTML ni thabiti na yanafanana na mpangaji wa GitHub. Tabia chache za kujua: HTML ya ndani ndani ya Markdown (mfano <sub>maandishi</sub>) hupita bila mabadiliko kwenye matokeo, na vichwa vya setext vya CommonMark (laini === chini) na vichwa vya ATX (# Kichwa) vyote huzalisha <h1> ile ile. Hizi ni tabia zilizoundwa za marked, si hitilafu. Ikiwa unahitaji mwelekeo wa kinyume, kuvuta HTML iliyoundwa kurudi kwenye Markdown, tumia zana ya HTML hadi Markdown.

Je, uangaziaji wa sintaksia katika bloku za msimbo zilizofungwa unasaidiwa?

Si katika v1. Bloku za msimbo zilizofungwa zinaundwa na fonti ya monospaced na mandhari ya busara lakini bila uangaziaji wa tokeni wa kila lugha. Kuongeza uangaziaji wa sintaksia kungehitaji kufunga Prism au highlight.js, kila moja ikiongeza KB 15–40 pamoja na faili ya sarufi kwa kila lugha na matrix ya mandhari ambayo ingehitaji kulingana na mfumo wa rangi wa Workshop Terminal. Kwa sasa, mpangaji huzingatia usahihi na usalama dhidi ya XSS; ikiwa kuna mahitaji ya watumiaji kwa uangaziaji wa ndani, kitufe cha hiari ni hatua inayoweza kufuatwa.

Kibadilishaji hiki cha Markdown hadi HTML kinasafirisha na marked@12.0.2 na DOMPurify@3.1.7 vilivyofungwa kwenye asili ile ile, kinasaidia seti kamili ya vipengele vya GFM, na kusafisha kila mfuatano wa HTML ulioundwa kabla haujagusa DOM. Hakuna kupakia, hakuna CDN, hakuna telemetri — kila byte inabaki kwenye kivinjari chako.