Kibadilishaji HTML hadi Markdown — Badilisha HTML hadi Markdown Mtandaoni _

Ubadilishaji wa HTML hadi Markdown ni nini?

HTML ni alama iliyoundwa ambayo kivinjari huonyesha — <h1>, <ul>, <table>, <a>, na zaidi. Markdown ni muundo wa maandishi wazi mwepesi unaotumia alama ndogo za uandishi (# kwa vichwa, * kwa msisitizo, - kwa vipengele vya orodha) kusimba muundo huo huo. GitHub Flavored Markdown (GFM) inapanua uainishi asili wa CommonMark na meza, kufuta, orodha za kazi, na viungo vya kiotomati. Kubadilisha HTML hadi Markdown hukuvuta HTML iliyoundwa au kusafirishwa kurudi kwenye Markdown ya maandishi wazi inayoweza kuhaririwa — hasa kile kinachohitajika kwa uhamiaji wa maudhui kutoka CMS, au usafi wa README.

Vipengele vipi vya GitHub Flavored Markdown vinavyoungwa mkono na matokeo?

Injini ya turndown@7.2.0 iliyofungwa na kiendelezi cha turndown-plugin-gfm hutoa superset kamili ya GFM kutoka HTML yako: vichwa vya mtindo wa ATX # hadi ###### kutoka <h1>–<h6>, orodha zilizopangwa na zisizopangwa na uwekaji wa ndani, ujasiri **maandishi** na italiki *maandishi*, kufuta ~~maandishi~~ kutoka <del>, viungo vya ndani [maandishi](url) na picha za ndani ![alt](src), bloku za msimbo zilizofungwa na vidokezo vya lugha (```js), vipande vya msimbo wa ndani `msimbo`, meza za bomba kutoka <table>, orodha za kazi za GFM - [ ] / - [x] kutoka ingizo za checkbox, nukuu za kizuizi >, na sheria za usawa ---. Kidirisha cha muhtasari hurender tena Markdown iliyotolewa kwa marked@12.0.2 ili uweze kuthibitisha ubadilishaji kwa macho.

Ubadilishaji wa HTML hadi Markdown unafanya kazi vipi?

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

1. Safisha: HTML iliyobandikwa kwanza hupita kupitia DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) kuondoa vipengele vya <script>, kila kishiki cha matukio cha on*, na URI za javascript: kabla ya chochote kutembea kwenye alama. DOMPurify ni kisafishi kile kile cha XSS kinachotumiwa na Mozilla MDN, Atlassian, na Microsoft 365.
2. Badilisha: turndownService.turndown hutembea DOM iliyosafishwa na kutoa GitHub Flavored Markdown — vichwa vinakuwa viambishi awali vya #, orodha zinakuwa vipengele vya - / 1., <table> inakuwa meza ya bomba, na kadhalika. Markdown inaandikwa kwenye <textarea> ya matokeo ya kusoma-tu kupitia value (kamwe si innerHTML), kwa hivyo ina usalama wa asili.
3. Unda: Markdown iliyotolewa huchanganuliwa tena na marked.parse, husafishwa tena kupitia DOMPurify, na kupewa kidirisha cha muhtasari kwa innerHTML ili upate uthibitisho wa kuona kwamba Markdown inarudi kwenye muundo unaotarajiwa. Hali ya moja kwa moja inasimama ingizo kwa ms 150 ili matokeo yasasishe unapobandika bila kusumbua mchanganuzi.

Kwa nini ubadilishe HTML hadi Markdown na zana hii?

• Faragha: kila upitio wa usafi, ubadilishaji, na uundaji hufanyika kwenye kivinjari chako. HTML — ikijumuisha machapisho ya CMS yaliyosafirishwa, nyaraka za ndani, na chanzo cha ukurasa cha siri — haifiki seva zetu kamwe.
• Salama dhidi ya XSS kwa chaguo-msingi: HTML iliyobandikwa hupita kupitia DOMPurify kabla ya turndown kuitembea, na kidirisha cha muhtasari huendesha tena HTML iliyoundwa upya kupitia DOMPurify tena kabla ya innerHTML, kwa hivyo kubandika alama zenye lebo za <script> au vishiki vya onerror= kunazalisha muhtasari usio na madhara na Markdown safi.
• Kamili kwa GFM: vipengele vya <table> vinabadilishwa kuwa meza za bomba za Markdown, <del> kuwa kufuta, na orodha za checkbox kuwa orodha za kazi za GFM. Kibadilishaji kingi mtandaoni huacha meza kwenye njia ya HTML → Markdown — kiendelezi kilichofungwa cha turndown-plugin-gfm kizihifadhi.

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

Kubadilisha HTML hadi Markdown kunaonekana katika uhamiaji wa maudhui, nyaraka, na uandishi wa kumbukumbu:

• Uhamiaji wa CMS: kusafirisha chapisho la WordPress au Ghost kama HTML na kubadilisha kuwa Markdown kwa ujenzi upya wa tovuti ya statiki wa Hugo / Jekyll / 11ty / Astro. Ubadilishaji unahifadhi viwango vya kichwa, viungo, orodha, na msisitizo wa ndani.
• Usafi wa README: kubandika HTML iliyoundwa ya ukurasa wa wiki au makala ya wavuti na kuirudisha kwenye Markdown inayoweza kuhaririwa kwa README ya mradi au tovuti ya nyaraka — badala ya kuandika tena muundo kwa mkono.
• Uandishi wa kumbukumbu: kukamata barua pepe ya HTML au web clipping na kubadilisha kuwa Markdown kwa kuhifadhi katika Obsidian, Notion, au msingi wa maarifa wa maandishi wazi — Markdown inabaki inayofaa kwa diff na kuishi kupitia mabadiliko ya muundo.

Mfano wa ubadilishaji wa HTML hadi Markdown unaonekanaje?

Kubandika <h2>Heading</h2><ul><li>a</li><li>b<ul><li>nested</li></ul></li></ul> kunazalisha Markdown na ## Heading, orodha ya risasi iliyowekwa ndani, na kidirisha cha muhtasari kinachounda upya hadi muundo ule ule uliowekwa ndani. Kubandika <table> yenye safu ya kichwa na safu mbili za data kunazalisha meza ya bomba sawa ya | col | col | — ukithibitisha ubadilishaji unahifadhi vichwa, orodha, na meza.

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

Ndiyo. Kila upitio wa usafi, ubadilishaji, na uundaji hufanyika nchini kama JavaScript ndani ya kichupo cha kivinjari chako. Maktaba tatu zilizofungwa — turndown@7.2.0 (na turndown-plugin-gfm@1.0.2), 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 yaliyosafirishwa, nyaraka za ndani, na chanzo cha ukurasa cha 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. 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 zinabadilishwa kutoka HTML?

Ndiyo. Mwelekeo wa HTML → Markdown unatumia turndown-plugin-gfm, ambayo inaongeza sheria ya kawaida ya turndown inayotembea nodi za <table> na kutoa Markdown sawa ya meza ya bomba — safu ya kichwa, safu ya urambazaji ya |---|---|, kisha safu za data. Kibadilishaji kingi mtandaoni huacha meza kwenye njia hii; hiki kinazihifadhi. Kufuta (<del>maandishi</del> → ~~maandishi~~) na orodha za kazi (<input type="checkbox"> → - [ ] / - [x]) zinabadilishwa kwa njia ile ile.

Je, HTML yangu itabadilishwa kwa usafi?

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 — ubadilishaji ni safi na unaotabiriwa. Hali za pembe: maoni ya HTML (<!-- ... -->) yanaondolewa (Markdown haina sintaksia ya maoni); inline styling na sifa za class zinaondolewa kwa sababu Markdown haina sawa yake; na lebo za ndani zisizo za kawaida kama <sub> / <sup> zinabadilishwa kuwa maandishi wazi. Hizi ni tabia zilizoundwa za turndown, si hitilafu.

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 HTML hadi Markdown kinasafirisha na turndown@7.2.0 (+ turndown-plugin-gfm@1.0.2), marked@12.0.2, na DOMPurify@3.1.7 vilivyofungwa kwenye asili ile ile, hutoa 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.