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

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

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

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

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

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

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

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

આ ટૂલ વડે HTML ને Markdown માં શા માટે બદલવું?

• ગોપનીયતા: દરેક સૅનિટાઇઝ, રૂપાંતર અને રેન્ડર પાસ તમારા બ્રાઉઝરમાં થાય છે. HTML — નિકાસ કરેલ CMS પોસ્ટ, આંતરિક દસ્તાવેજીકરણ અને ગોપનીય પૃષ્ઠ સ્રોત સહિત — ક્યારેય અમારા સર્વર સુધી પહોંચતી નથી.
• ડિફૉલ્ટ રીતે XSS-સુરક્ષિત: પેસ્ટ કરેલ HTML turndown તેને ફરે તે પહેલાં DOMPurify માંથી પસાર થાય છે, અને પ્રીવ્યૂ પૅન ફરી-રેન્ડર થયેલ HTML ને innerHTML પહેલાં ફરી DOMPurify માંથી પસાર કરે છે, તેથી <script> ટૅગ કે onerror= હૅન્ડલર ધરાવતો માર્કઅપ પેસ્ટ કરવાથી નિષ્ક્રિય પ્રીવ્યૂ અને સ્વચ્છ Markdown બને છે.
• GFM-પૂર્ણ: <table> ઘટકો Markdown પાઇપ કોષ્ટકોમાં બદલાય છે, <del> સ્ટ્રાઇકથ્રૂમાં, અને ચેકબોક્સ સૂચિઓ GFM ટાસ્ક લિસ્ટમાં. મોટાભાગના ઑનલાઇન કન્વર્ટર HTML → Markdown માર્ગ પર કોષ્ટકો ગુમાવી દે છે — સામેલ turndown-plugin-gfm એક્સ્ટેન્શન તેમને જાળવી રાખે છે.

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

HTML ને Markdown માં બદલવું કન્ટેન્ટ માઇગ્રેશન, દસ્તાવેજીકરણ અને આર્કાઇવિંગમાં દેખાય છે:

• CMS માઇગ્રેશન: WordPress અથવા Ghost ની પોસ્ટને HTML તરીકે નિકાસ કરીને Hugo / Jekyll / 11ty / Astro સ્ટૅટિક-સાઇટ પુનઃનિર્માણ માટે Markdown માં બદલવી. રૂપાંતર હેડિંગ સ્તર, લિંક, સૂચિઓ અને ઇનલાઇન ભાર જાળવી રાખે છે.
• README સફાઈ: કોઈ વિકિ પૃષ્ઠ કે વેબ લેખની રેન્ડર-થયેલ HTML પેસ્ટ કરીને સંરચના હાથે ફરી ટાઇપ કરવાને બદલે તેને પ્રોજેક્ટ README કે દસ્તાવેજ સાઇટ માટે સંપાદનયોગ્ય Markdown માં પાછી ખેંચવી.
• આર્કાઇવિંગ અને નોંધો: HTML ઈમેઇલ કે વેબ ક્લિપિંગ કેપ્ચર કરીને Obsidian, Notion કે સાદા-ટેક્સ્ટ નોલેજ બેઝમાં સંગ્રહ માટે Markdown માં બદલવી — Markdown ડિફ-ફ્રેન્ડલી રહે છે અને ફૉર્મેટ બદલાવ સામે ટકી રહે છે.

HTML થી Markdown ઉદાહરણ કેવું દેખાય છે?

<h2>Heading</h2><ul><li>a</li><li>b<ul><li>nested</li></ul></li></ul> પેસ્ટ કરવાથી ## Heading, એક નેસ્ટેડ બુલેટ સૂચિ અને એ જ નેસ્ટેડ સંરચનામાં ફરી રેન્ડર થતો પ્રીવ્યૂ પૅન ધરાવતું Markdown બને છે. હેડર પંક્તિ અને બે ડેટા પંક્તિ ધરાવતું <table> પેસ્ટ કરવાથી સમકક્ષ | col | col | પાઇપ કોષ્ટક બને છે — જે પુષ્ટિ કરે છે કે રૂપાંતર હેડિંગ, સૂચિઓ અને કોષ્ટકો જાળવી રાખે છે.

શું આ HTML થી Markdown કન્વર્ટર સંપૂર્ણપણે મારા બ્રાઉઝરમાં ચાલે છે?

હા. દરેક સૅનિટાઇઝ, રૂપાંતર અને રેન્ડર પાસ તમારા બ્રાઉઝર ટૅબની અંદર JavaScript તરીકે સ્થાનિક રીતે ચાલે છે. ત્રણ સામેલ લાઇબ્રેરી — turndown@7.2.0 (turndown-plugin-gfm@1.0.2 સાથે), marked@12.0.2 અને DOMPurify@3.1.7 — પૃષ્ઠની એ જ ઉત્પત્તિ (same origin) માંથી લોડ થાય છે, તેથી કોઈ CDN નિર્ભરતા નથી, કોઈ fetch નથી, કોઈ XMLHttpRequest નથી, ઇનપુટ પર કોઈ navigator.sendBeacon નથી. પૃષ્ઠ એક વાર લોડ થઈ ગયા પછી આ ટૂલ ઑફલાઇન પણ કામ કરે છે, કારણ કે તે વેન્ડર લાઇબ્રેરી સાથે કૉપિ કરેલ સ્ટૅટિક HTML/CSS/JS બંડલ છે. નિકાસ કરેલ પોસ્ટ, આંતરિક દસ્તાવેજ અને ગોપનીય પૃષ્ઠ સ્રોત તમારા ઉપકરણ પર જ રહે છે.

શું રેન્ડર થયેલું પ્રીવ્યૂ પૅનલ XSS-સલામત છે?

હા. પેસ્ટ કરેલ HTML turndown તેને ફરે તે પહેલાં DOMPurify.sanitize માંથી પસાર થાય છે, અને પ્રીવ્યૂના innerHTML ને સોંપાયેલ દરેક HTML સ્ટ્રિંગ પણ DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) માંથી પસાર થાય છે. DOMPurify એ Cure53 દ્વારા જાળવાયેલ ઓપન-સોર્સ XSS સૅનિટાઇઝર છે; એ જ લાઇબ્રેરી Mozilla MDN, Atlassian અને Microsoft 365 વપરાશકર્તા-પ્રદત્ત HTML ને મજબૂત બનાવવા માટે ઉપયોગ કરે છે. ડિફૉલ્ટ html પ્રોફાઇલ <script> ઘટકો, દરેક on* ઇવેન્ટ-હૅન્ડલર ઍટ્રિબ્યૂટ (onerror, onclick વગેરે) અને javascript: URI યોજનાઓ દૂર કરે છે. <img src=x onerror=alert(1)> પેસ્ટ કરવાથી એવો પ્રીવ્યૂ બને છે જ્યાં document.querySelector('#output-preview img[onerror]') null પાછું આપે છે અને કોઈ alert ચાલતો નથી.

શું GFM કોષ્ટકો HTML માંથી રૂપાંતરિત થાય છે?

હા. HTML → Markdown દિશા turndown-plugin-gfm નો ઉપયોગ કરે છે, જે એક કસ્ટમ turndown નિયમ ઉમેરે છે જે <table> નોડ પર ફરીને સમકક્ષ પાઇપ-કોષ્ટક Markdown ઉત્સર્જિત કરે છે — એક હેડર પંક્તિ, એક |---|---| સંરેખણ પંક્તિ, પછી ડેટા પંક્તિઓ. મોટાભાગના ઑનલાઇન કન્વર્ટર આ માર્ગ પર કોષ્ટકો ગુમાવી દે છે; આ તેમને જાળવી રાખે છે. સ્ટ્રાઇકથ્રૂ (<del>text</del> → ~~text~~) અને ટાસ્ક લિસ્ટ (<input type="checkbox"> → - [ ] / - [x]) એ જ રીતે રૂપાંતરિત થાય છે.

શું મારી HTML સ્વચ્છ રીતે રૂપાંતરિત થશે?

પ્રમાણભૂત GFM ફીચર-સેટ માટે — h1 થી h6 સુધી હેડિંગ, નેસ્ટિંગ સાથેની ક્રમિત અને અક્રમિત સૂચિઓ, બોલ્ડ / ઇટૅલિક / સ્ટ્રાઇકથ્રૂ, ઇનલાઇન લિંક, ઇનલાઇન છબીઓ, ભાષા ટૅગ સાથેના ફેન્સ્ડ કોડ બ્લૉક, ઇનલાઇન કોડ સ્પૅન, પાઇપ કોષ્ટકો, ટાસ્ક લિસ્ટ, અવતરણ, આડી રેખાઓ અને ઑટોલિંક — રૂપાંતર સ્વચ્છ અને અનુમાનિત છે. એજ કેસ: HTML ટિપ્પણીઓ (<!-- ... -->) દૂર થઈ જાય છે (Markdown માં ટિપ્પણી સિન્ટૅક્સ નથી); ઇનલાઇન સ્ટાઇલિંગ અને class ઍટ્રિબ્યૂટ છોડી દેવાય છે કારણ કે Markdown માં તેનો સમકક્ષ નથી; અને <sub> / <sup> જેવા અસામાન્ય ઇનલાઇન ટૅગ સાદા લખાણમાં બદલાય છે. આ turndown ના દસ્તાવેજીકૃત વર્તન છે, બગ નથી.

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

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

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