Markdown થી HTML કન્વર્ટર — Markdown ને HTML માં ઓનલાઇન બદલો _

Markdown થી HTML રૂપાંતર એટલે શું?

Markdown એ એક હળવા વજનનું સાદા-ટેક્સ્ટ ફૉર્મેટ છે જે ઓછા વિરામચિહ્નોનો ઉપયોગ કરે છે — શીર્ષકો માટે #, ભાર મૂકવા માટે *, સૂચિ-ઘટકો માટે - — અને સંરચિત ગદ્ય એન્કોડ કરે છે. GitHub Flavored Markdown (GFM) મૂળ CommonMark સ્પેસિફિકેશનને કોષ્ટકો, સ્ટ્રાઇકથ્રૂ, ટાસ્ક-લિસ્ટ અને ઑટોલિંક સાથે વિસ્તૃત કરે છે. HTML એ રેન્ડર-થયેલ સ્વરૂપ છે જે બ્રાઉઝર દર્શાવે છે. Markdown ને HTML માં ફેરવવાથી તમે હળવા સિન્ટેક્સમાં લખી શકો અને ટૅગ હાથે લખ્યા વગર રેન્ડર-થયેલ સપાટી પર (README, સ્ટૅટિક-સાઇટ પાનું, ઈમેઇલ બૉડી) મોકલી શકો.

GitHub Flavored Markdown ની કઈ સુવિધાઓ સમર્થિત છે?

સામેલ marked@12.0.2 પાર્સર સંપૂર્ણ GFM સુપરસેટને સમર્થન આપે છે: ATX-શૈલીના શીર્ષકો # થી ######, નેસ્ટિંગ સાથેની ક્રમિત અને અક્રમિત સૂચિઓ, બોલ્ડ **text** અને ઇટૅલિક *text*, સ્ટ્રાઇકથ્રૂ ~~text~~, ઇનલાઇન લિંક [text](url) અને ઇનલાઇન છબીઓ ![alt](src), વૈકલ્પિક ભાષા ટૅગ સાથેના ફેન્સ્ડ કોડ બ્લૉક (```js), ઇનલાઇન કોડ સ્પૅન `code`, હેડર પંક્તિ સાથેના પાઇપ કોષ્ટકો, GFM ટાસ્ક લિસ્ટ - [ ] / - [x], અવતરણ >, આડી રેખાઓ --- અને ઑટોલિંક. દરેક પ્રીવ્યૂ પૅનમાં બરાબર એ જ રીતે રેન્ડર થાય છે જે રીતે GitHub રેન્ડર કરે છે.

Markdown થી HTML રૂપાંતર કઈ રીતે કામ કરે છે?

દરેક રૂપાંતર તમારા બ્રાઉઝરમાં બે સંગ્રહિત (bundled) લાઇબ્રેરીઓની મદદથી સ્થાનિક રીતે ચાલે છે — CDN, fetch, કે telemetry વિના. ઉચ્ચ-સ્તરના પગલાઓ આ પ્રમાણે છે:

1. પાર્સ: marked.parse(source) તમારું Markdown વાંચે છે અને એક HTML સ્ટ્રિંગ બનાવે છે. પાર્સર GFM મોડમાં ચાલે છે, તેથી કોષ્ટકો, ટાસ્ક લિસ્ટ, સ્ટ્રાઇકથ્રૂ અને ઑટોલિંક બધાં ઓળખાય છે.
2. સૅનિટાઇઝ: HTML આઉટપુટને innerHTML ને સોંપતા પહેલાં DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) માંથી પસાર કરવામાં આવે છે. DOMPurify એ એ જ XSS સૅનિટાઇઝર છે જેનો ઉપયોગ Mozilla MDN, Atlassian અને Microsoft 365 કરે છે — તે HTML ને પાર્સ કરે છે, DOM પર ફરે છે, અને <script> ઘટકો, દરેક on* ઇવેન્ટ-હૅન્ડલર ઍટ્રિબ્યૂટ અને javascript: URI યોજનાઓ દૂર કરે છે.
3. રેન્ડર: સૅનિટાઇઝ થયેલ HTML innerHTML દ્વારા પ્રીવ્યૂ પૅનમાં લખાય છે, અને રૉ HTML બીજા પૅનમાં ફક્ત-વાંચન <textarea> દ્વારા દર્શાવાય છે જેથી તમે માર્કઅપ કૉપિ કરી શકો. લાઇવ મોડ ઇનપુટને 150 ms માટે ડિબાઉન્સ કરે છે, જેથી તમે ટાઇપ કરો ત્યારે પાર્સરને વધુ પડતો ભાર આપ્યા વગર પ્રીવ્યૂ અપડેટ થતો રહે.

આ ટૂલ વડે Markdown ને HTML માં શા માટે convert કરવું?

• ગોપનીયતા: દરેક parse, sanitize, અને render pass તમારા બ્રાઉઝરમાં ચાલે છે. તમારું Markdown (અપ્રકાશિત બ્લૉગ પોસ્ટ, આંતરિક દસ્તાવેજ ડ્રાફ્ટ, ગોપનીય README સામગ્રી) ક્યારેય અમારા સર્વર સુધી પહોંચતું નથી.
• ડિફૉલ્ટ રીતે XSS-સુરક્ષિત: રેન્ડર થયેલ પ્રીવ્યૂ પૅન દરેક HTML સ્ટ્રિંગને innerHTML પહેલાં DOMPurify માંથી પસાર કરે છે, તેથી તમારા Markdown ની અંદર રૉ HTML માં છૂટોછવાયો <script> ટૅગ અથવા onerror= હૅન્ડલર નિષ્ક્રિય પ્રીવ્યૂ બનાવે છે. રૉ પૅન બિન-સૅનિટાઇઝ થયેલ આઉટપુટ તપાસ માટે દર્શાવે છે, જે value દ્વારા <textarea> ની અંદર બેસે છે — ક્યારેય ચલાવાતી નથી.
• GFM-પૂર્ણ: કોષ્ટકો, સ્ટ્રાઇકથ્રૂ, ટાસ્ક લિસ્ટ અને ઑટોલિંક બધાં એ જ રીતે રેન્ડર થાય છે જે રીતે GitHub રેન્ડર કરે છે. એક Markdown પાઇપ-કોષ્ટક <thead> અને <tbody> સાથેના HTML <table> માં બદલાય છે — કોઈ પંક્તિ ગુમ થતી નથી, કોઈ સંરચના સપાટ થતી નથી.

Markdown થી HTML રૂપાંતરના સામાન્ય ઉપયોગો ક્યા છે?

Markdown ને HTML માં ફેરવવું એ દસ્તાવેજીકરણ, સ્ટૅટિક-સાઇટ કામ અને ઈમેઇલ લેખનમાં દેખાય છે:

• GitHub README લેખન: કોઈ પ્રોજેક્ટના README નો સ્થાનિક રીતે Markdown માં મુસદ્દો તૈયાર કરો અને પુશ કરતા પહેલાં રેન્ડર થયેલ HTML નો પ્રીવ્યૂ જુઓ. પ્રીવ્યૂ કોષ્ટકો, ટાસ્ક લિસ્ટ અને ફેન્સ્ડ કોડ માટે GitHub ના GFM રેન્ડરર સાથે મેળ ખાય છે.
• સ્ટૅટિક-સાઇટ સામગ્રી: એક Markdown પોસ્ટ પેસ્ટ કરો અને CMS ફીલ્ડ અથવા એવા ટેમ્પ્લેટિંગ એન્જિન માટે HTML મેળવો જે Markdown સ્રોતને બદલે માર્કઅપની અપેક્ષા રાખે છે.
• ઈમેઇલ ટેમ્પ્લેટ: વ્યવહાર-સંબંધી ઈમેઇલ બૉડીને 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 — પૃષ્ઠની એ જ ઉત્પત્તિ (same origin) માંથી લોડ થાય છે, તેથી કોઈ CDN નિર્ભરતા નથી, કોઈ fetch નથી, કોઈ XMLHttpRequest નથી, ઇનપુટ પર કોઈ navigator.sendBeacon નથી. પૃષ્ઠ એક વાર લોડ થઈ ગયા પછી આ ટૂલ ઑફલાઇન પણ કામ કરે છે, કારણ કે તે વેન્ડર લાઇબ્રેરી સાથે કૉપિ કરેલ સ્ટૅટિક HTML/CSS/JS બંડલ છે. અપ્રકાશિત પોસ્ટ, આંતરિક દસ્તાવેજ અને ગોપનીય README તમારા ઉપકરણ પર જ રહે છે.

શું રેન્ડર થયેલું પ્રીવ્યૂ પૅનલ 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 અભિવ્યક્તિઓ દૂર કરે છે. જો તમારું Markdown રૉ <img src=x onerror=alert(1)> સામેલ કરે, તો એવો પ્રીવ્યૂ બને છે જ્યાં document.querySelector('#output-preview img[onerror]') null પાછું આપે છે અને કોઈ alert ચાલતો નથી.

શું GFM કોષ્ટકો સમર્થિત છે?

હા. Markdown → HTML દિશા marked ના GFM મોડ દ્વારા પાઇપ કોષ્ટકો મૂળભૂત રીતે સંભાળે છે — |---|---| સંરેખણ પંક્તિથી અલગ કરેલી હેડર પંક્તિ, ત્યારબાદ ડેટા પંક્તિઓ, એક <table> બનાવે છે જેમાં <thead> + <tbody> હોય છે. સ્ટ્રાઇકથ્રૂ (~~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 માં ખેંચવા — તો HTML થી Markdown ટૂલ વાપરો.

શું ફેન્સ્ડ કોડ બ્લોકમાં સિન્ટેક્સ હાઇલાઇટિંગ સમર્થિત છે?

v1 માં નહીં. ફેન્સ્ડ કોડ બ્લૉક મોનોસ્પેસ ફૉન્ટ અને હળવી પૃષ્ઠભૂમિ સાથે રેન્ડર થાય છે, પણ ભાષા-વિશિષ્ટ ટોકન હાઇલાઇટિંગ વગર. સિન્ટૅક્સ હાઇલાઇટિંગ ઉમેરવા માટે Prism અથવા highlight.js ને બંડલ કરવું પડે, જેમાંથી દરેક 15–40 KB ઉમેરે છે, સાથે પ્રતિ-ભાષા વ્યાકરણ ફાઇલ અને Workshop Terminal પૅલેટ સાથે સંરેખણની જરૂર પડે એવી થીમ મૅટ્રિક્સ પણ. હાલ માટે રેન્ડરર ચોકસાઈ અને XSS-સુરક્ષા પર કેન્દ્રિત છે; જો ઇનલાઇન હાઇલાઇટિંગ માટે વપરાશકર્તાની માગ હોય, તો ઑપ્ટ-ઇન ટૉગલ એક વ્યવહારુ આગળનું પગલું છે.

આ Markdown થી HTML કન્વર્ટર એ જ ઉત્પત્તિ (same origin) પર બંડલ થયેલ marked@12.0.2 અને DOMPurify@3.1.7 સાથે આવે છે, સંપૂર્ણ GFM ફીચર-સેટને સમર્થન આપે છે, અને રેન્ડર થયેલ દરેક HTML સ્ટ્રિંગને DOM ને સ્પર્શે તે પહેલાં સૅનિટાઇઝ કરે છે. કોઈ અપલોડ નહીં, કોઈ CDN નહીં, કોઈ ટેલિમેટ્રી નહીં — દરેક બાઇટ તમારા બ્રાઉઝરમાં જ રહે છે.