§

Liƙa Markdown

§

Mai ƙanƙanta

§

Kallon Farko

Preview yana tsarkakewa ta DOMPurify — ana cire tags na rubutun, masu sarrafa taron, da javascript: URIs kafin nuna.

Markdown yana zama harshen haɗin gwiwa na takardun bayanai na ƙware a Najeriya da Afirka. Kowane README na GitHub, amsa na Stack Overflow, da sharhi na Discord yana wucewa ta parser na Markdown. Masu rubuta fasaha, masu kula da buɗaɗɗen tushe, da injiniyoyin dandali duk suna canza Markdown zuwa HTML a aikin yau da kullum — don labaran blogu, takardun bayanai na cikin gida, ko ɗaukar abun ciki zuwa tsarin gidan yanar gizo na statiki. Wannan kayan aiki yana gudanar da kowane canzawa nchini kuma yana kiyaye duk wani bayani a cikin burauzarka.

// Kayan Aiki Masu Alaƙa

./html-to-markdown
Mai Canza HTML zuwa Markdown
Canza HTML zuwa Markdown a cikin burauzarka.
→
./html-beautifier
Kyautatawa HTML
Tsara manzarar HTML da aka rage ko mara tsari tare da shigarwa da nannade layi masu saiwa.
→
./html-minifier
HTML Mai Rage Girma
Cire sarari da bayanai daga HTML a cikin mai binciken ka.
→
./
Duk Kayan Aiki
Duba cikakkun kayan aikin Ultim8Soft na online.
→

Menene canzawar Markdown zuwa HTML?

Markdown tsari ne mai nauyi kaɗan na rubutu mai sauƙi wanda ke amfani da kaɗan alamar foda (# don taken, * don muhimmanci, - don abubuwan jerin) don lambar rubutun da aka tsara. GitHub Flavored Markdown (GFM) yana faɗaɗa takardan CommonMark na asali da tebur, soke-soke, jerin ayyuka, da autolinks. HTML siffa ce da aka nuna wanda burauzar ke nuna. Canza Markdown zuwa HTML yana bawa ka damar rubuta a cikin syntax mai sauƙi kuma aika zuwa saman da aka nuna — README, shafin gidan yanar gizo mai tsauri, ko jikin imel — ba tare da rubuta tags da hannu ba.

Waɗane fasali na GitHub Flavored Markdown ana goyan bayan su?

Parser na marked@12.0.2 da aka haɗa yana goyan bayan cikakken superset na GFM: taken salon ATX # zuwa ######, jerin da aka oda da mara oda tare da haɗawa, mai ƙarfi **rubutu** da italic *rubutu*, soke-soke ~~rubutu~~, hanyoyi cikin layi [rubutu](url) da hotuna cikin layi ![alt](src), ɓangarorin lambar da aka keɓe tare da tags na harshe na zaɓi (```js), ɓangaren lambar cikin layi `lambar`, tebur ɗin ƙwallo tare da layin taken, jerin ayyuka na GFM - [ ] / - [x], ɗabi'u >, ƙa'idodin kwance ---, da autolinks. Kowane fasali yana nuna a cikin allo na preview daidai yadda GitHub ke nuna shi.

Yadda canzawar Markdown zuwa HTML ke aiki?

Kowane canzawa yana gudana a gida a cikin burauzarka ta amfani da ɗakunan karatu biyu da aka haɗa — babu CDN, babu fetch, babu telemetry. Matakai mafi girma sune:

  1. Bincike: marked.parse(source) yana karanta Markdown ɗinka kuma yana samar da kirtanin HTML. Parser yana gudana a yanayin GFM, don haka tebur, jerin ayyuka, soke-soke, da autolinks duk ana ganowa.
  2. Tsarkakewa: ana gudanar da fitarwa ta HTML ta DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) kafin sanya shi zuwa innerHTML. DOMPurify shine mai tsarkake XSS guda ɗaya da Mozilla MDN, Atlassian, da Microsoft 365 ke amfani da shi — yana bincike HTML, tafiya DOM, kuma yana cire abubuwan <script>, kowane sifit mai sarrafa taron na on*, da tsarin URI na javascript:.
  3. Nuna: ana rubuta HTML mai tsabta zuwa allo na preview ta innerHTML, kuma HTML mai ƙanƙanta yana nuna a cikin allo na biyu ta <textarea> na karanta kawai don ka iya kwafi markup. Yanayin live yana jinkiri shigarwa da 150 ms don preview ya sabunta yayin da kake rubuta ba tare da ɗaukar parser ba.

Me ya sa canza Markdown zuwa HTML da wannan kayan aiki?

  • Sirri: kowane bincike, tsarkakewa, da nuna wucewar yana gudana a cikin burauzarka. Markdown — ciki har da rubutun blog da ba a fitar da shi, draftoci na takardun bayanai na cikin gida, da abun ciki na README masu sirranci — ba su taɓa maɓallinmu.
  • Aminci daga XSS ta asali: allo na preview da aka nuna yana gudanar da kowane kirtanin HTML ta DOMPurify kafin innerHTML, don tag <script> ko mai sarrafa onerror= da ya ɓace a cikin HTML ghafi a cikin Markdown ɗinka yana samar da preview mara aiki. Taba ghafi tana nuna fitarwa da ba a tsarkake don duba — tana zaune a cikin <textarea> ta value kuma ba a taɓa aiwatar da shi ba.
  • GFM-cikakke: tebur, soke-soke, jerin ayyuka, da autolinks suna nuna daidai yadda GitHub ke nuna su. Tebur na ƙwallo na Markdown yana zama <table> na HTML da <thead> da <tbody> — babu layin da aka rasa, babu tsarin da aka daidaita.

Menene ayyukan gari na canzawar Markdown zuwa HTML?

Canza Markdown zuwa HTML yana bayyana a cikin takardun bayanai, aikin gidan yanar gizo mai tsauri, da rubuta imel:

  • Rubuta README na GitHub: tsara README na aikin a gida a matsayin Markdown kuma duba HTML da aka nuna kafin tura. Preview ya daidaita mai nuna GFM na GitHub don tebur, jerin ayyuka, da lambar da aka keɓe.
  • Abun ciki na gidan yanar gizo mai tsauri: liƙa rubutun Markdown kuma sami HTML don filin CMS ko injin ƙirar wanda ke sa ran markup maimakon tushen Markdown.
  • Samfurin imel: rubuta jikin imel mai hulɗa a matsayin Markdown kuma canza zuwa HTML don injin ƙirar mai bayar da sabis na imel. Fitarwa HTML mai ma'ana mai sauƙi ne — babu salon cikin layi, babu abubuwan musamman na abokin imel da aka ƙara.

Yaya misali na canzawar Markdown zuwa HTML ke kama?

Liƙa # Title\n\n- item 1\n- item 2\n\n[link](https://example.com) yana samar da allo na preview da ke ƙunshe da <h1>Title</h1>, jerin da ba a oda ba na abubuwa biyu, da <a href="https://example.com">link</a>. Taba ghafi tana nuna kirtanin HTML daidai don ka iya kwafi shi kai tsaye zuwa template. Tebur ɗin ƙwallo tare da layin daidaitawa na |---|---| yana zama <table> cikakke da <thead> da <tbody> — tabbatar da cewa tebur na GFM suna nuna daidai yadda GitHub ke nuna su.

Shin wannan mai canza Markdown zuwa HTML yana gudana gaba ɗaya a cikin burauzarki?

Eh. Kowane bincike, tsarkakewa, da nuna wucewar yana gudana a gida a matsayin JavaScript a cikin taba burauzarka. Ɗakunan karatu biyu da aka haɗa — marked@12.0.2 da DOMPurify@3.1.7 — suna aika daga asalin guda ɗaya kamar shafi, don babu dogara ga CDN, babu fetch, babu XMLHttpRequest, babu navigator.sendBeacon akan shigarwa. Kayan aikin kuma yana aiki ba tare da intanet ba da zarar an loda shafin. Rubutun da ba a fitar da su, takardun bayanai na cikin gida, da READMEs masu sirranci suna zama a na'urar ka.

Shin allo na preview da aka nuna yana aminci daga XSS?

Eh. Kowane kirtanin HTML da aka sanya zuwa innerHTML yana wucewa ta DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) da farko. DOMPurify shine mai tsarkake XSS na buɗaɗɗen tushe da Cure53 ke kula da shi; shine ɗakin karatu guda ɗaya da Mozilla MDN, Atlassian, da Microsoft 365 ke amfani da shi don ƙarfafa HTML da mai amfani ya samar. Tsarin asali na html yana cire abubuwan <script>, kowane sifit mai sarrafa taron na on* (onerror, onclick, da sauransu), tsarin URI na javascript: a cikin href / src, da maganganu na CSS masu haɗari. Liƙa <img src=x onerror=alert(1)> yana samar da preview inda document.querySelector('#output-preview img[onerror]') yana dawo da null kuma babu faɗakarwa da ke ƙuna.

Shin ana goyan bayan tebur na GFM?

Eh. Alkibla ta Markdown → HTML tana sarrafa tebur ɗin ƙwallo ta asali ta yanayin GFM na marked — layin taken da aka raba da layin daidaitawa na |---|---|, sai layin bayanai, yana samar da <table> tare da <thead> + <tbody>. Soke-soke (~~rubutu~~ → <del>rubutu</del>) da jerin ayyuka (- [ ] / - [x] → <input type="checkbox">) suna nuna daidai yadda GitHub ke nuna su.

Shin Markdown ɗina zai canza ba tare da asara ba?

Don cikakken jerin fasali na GFM — taken h1 zuwa h6, jerin da aka oda da mara oda tare da haɗawa, mai ƙarfi / italic / soke-soke, hanyoyi cikin layi, hotuna cikin layi, ɓangarorin lambar da aka keɓe tare da tags na harshe, ɓangaren lambar cikin layi, tebur ɗin ƙwallo, jerin ayyuka, ɗabi'u, ƙa'idodin kwance, da autolinks — fitarwar HTML tana da tsauri kuma ta dace da mpangaji na GitHub. Ɗabi'u kaɗan da ya kamata a sani: HTML cikin layi a cikin Markdown (misali <sub>rubutu</sub>) yana wucewa ba tare da canjawa ba zuwa fitarwa, kuma taken setext na CommonMark (layin kasa ===) da taken ATX (# Title) duka suna samar da <h1> ɗaya. Waɗannan ɗabi'un marked ne da aka taƙaita, ba kwari ba. Idan kana buƙatar alkibla ta gaba, jan HTML da aka nuna baya zuwa Markdown, yi amfani da kayan aikin HTML zuwa Markdown.

Shin ana goyan bayan haske na syntax a cikin ɓangarorin lambar da aka keɓe?

Ba a cikin v1 ba. Ɓangarorin lambar da aka keɓe suna nuna da rubutun monospaced da bango mai sauƙi amma ba tare da haske na token na harshe ba. Ƙara haske na syntax zai buƙatar haɗa Prism ko highlight.js, wanda kowannensu yana ƙara 15–40 KB da fayil ɗin grammar na kowace harshe da matrisin jigo wanda zai buƙatar daidaita da ɗumbin Workshop Terminal. A yanzu, mai nuna yana mai da hankali kan daidaito da aminci daga XSS; idan akwai buƙatun mai amfani don haske cikin layi, mabuɗin opt-in shine bi-biye mai yiyuwa.

Wannan mai canza Markdown zuwa HTML yana aika da marked@12.0.2 da DOMPurify@3.1.7 da aka haɗa a asalin guda ɗaya, yana goyan bayan cikakken jerin fasali na GFM, kuma yana tsarkake kowane kirtanin HTML da aka nuna kafin ya taɓa DOM. Babu loda, babu CDN, babu telemetry — kowane byte yana zama a cikin burauzarka.