Markdown ते HTML conversion म्हणजे काय?
Markdown हे lightweight plain-text format आहे जे structured prose encode करण्यासाठी minimal punctuation वापरते (# headings साठी, * emphasis साठी, - list items साठी). GitHub Flavored Markdown (GFM) मूळ CommonMark spec ला tables, strikethrough, task lists, आणि autolinks सोबत extend करतो. HTML हे rendered form आहे जे browser display करतो. Markdown ते HTML convert केल्याने lightweight syntax मध्ये author करा आणि tags हाताने न लिहिता rendered surface ला ship करा.
कोणते GitHub Flavored Markdown features supported आहेत?
Bundled marked@12.0.2 parser full GFM superset support करतो: ATX-style headings # ते ######, ordered आणि unordered lists nesting सोबत, bold **text** आणि italic *text*, strikethrough ~~text~~, inline links [text](url) आणि inline images , optional language tags सोबत fenced code blocks (```js), inline code spans `code`, header rows सोबत pipe tables, GFM task lists - [ ] / - [x], blockquotes >, horizontal rules ---, आणि autolinks. प्रत्येक preview pane मध्ये GitHub ज्या प्रकारे render करतो त्याच प्रकारे render होतो.
Markdown ते HTML conversion कसे कार्य करते?
प्रत्येक conversion दोन bundled libraries वापरून browser मध्ये locally run होतो — CDN नाही, fetch नाही, telemetry नाही. High-level steps:
- Parse:
marked.parse(source)तुमचे Markdown वाचते आणि HTML string produce करते. Parser GFM mode मध्ये run होतो, त्यामुळे tables, task lists, strikethrough, आणि autolinks सर्व ओळखले जातात. - Sanitize: HTML output
innerHTMLला assign करण्यापूर्वीDOMPurify.sanitize(html, { USE_PROFILES: { html: true } })ने run होतो. DOMPurify हाच XSS sanitizer Mozilla MDN, Atlassian, आणि Microsoft 365 वापरतात — HTML parse करतो, DOM walk करतो, आणि<script>elements, प्रत्येकon*event handler attribute, आणिjavascript:URI schemes काढतो. - Render: sanitized HTML
innerHTMLद्वारे preview pane मध्ये लिहिला जातो, आणि raw HTML दुसऱ्या pane मध्ये read-only<textarea>द्वारे दाखवला जातो जेणेकरून तुम्ही markup कॉपी करू शकता. Live mode input 150 ms debounce करतो जेणेकरून तुम्ही type करताना preview update होतो.
या tool ने Markdown HTML मध्ये का convert करायचे?
- Privacy: प्रत्येक parse, sanitize, आणि render pass तुमच्या browser मध्ये होतो. Markdown — unreleased blog posts, internal documentation drafts, आणि confidential README content सह — कधीही आमच्या servers पर्यंत पोहोचत नाही.
- XSS-safe by default: rendered preview pane
innerHTMLआधी प्रत्येक HTML string DOMPurify ने run करतो, त्यामुळे तुमच्या Markdown मधील कच्चे<script>tags किंवाonerror=handlers असलेला HTML blob paste केल्यास inert preview मिळतो. Raw tab inspection साठी unsanitized string दाखवतो पण read-only<textarea>मध्येvalueद्वारे — कधीही execute होत नाही. - GFM-complete: tables, strikethrough, task lists, आणि autolinks GitHub ज्या प्रकारे render करतो त्याच प्रकारे render होतात. Markdown pipe-table
<thead>आणि<tbody>सोबत HTML<table>बनतो — कोणतीही dropped rows नाहीत, कोणतीही flattened structure नाही.
Markdown ते HTML conversion चे सामान्य उपयोग काय आहेत?
Markdown HTML मध्ये बदलणे documentation, static-site work, आणि email authoring मध्ये दिसते:
- GitHub README authoring: project README locally Markdown म्हणून draft करणे आणि push करण्यापूर्वी rendered HTML preview करणे. Preview GitHub च्या GFM renderer शी tables, task lists, आणि fenced code साठी जुळतो.
- Static-site content: Markdown post paste करणे आणि CMS field किंवा templating engine साठी HTML घेणे जे Markdown source ऐवजी markup expect करते.
- Email templates: transactional-email body Markdown म्हणून लिहिणे आणि email service provider च्या templating engine साठी HTML मध्ये convert करणे. Output plain semantic HTML आहे — inline styles नाहीत, email-client quirks नाहीत.
Markdown ते HTML conversion उदाहरण कसे दिसते?
# Title\n\n- item 1\n- item 2\n\n[link](https://example.com) paste केल्यास <h1>Title</h1>, two-item unordered list, आणि <a href="https://example.com">link</a> असलेला preview pane produce होतो. Raw pane exact HTML string दाखवतो जेणेकरून तुम्ही ती template मध्ये copy करू शकता. |---|---| alignment row असलेला pipe table <thead> आणि <tbody> सोबत पूर्ण <table> बनतो — GFM tables GitHub प्रमाणेच render होतात हे सिद्ध करतो.
हा Markdown ते HTML converter पूर्णपणे माझ्या browser मध्ये run होतो का?
होय. प्रत्येक parse, sanitize, आणि render pass तुमच्या browser tab मध्ये JavaScript म्हणून locally run होतो. Bundled libraries — marked@12.0.2 आणि DOMPurify@3.1.7 — page च्या same origin वरून ship होतात, त्यामुळे CDN dependency नाही, fetch नाही, XMLHttpRequest नाही, input वर navigator.sendBeacon नाही. Page load झाल्यावर tool offline पण काम करते. Unreleased posts, internal docs, आणि confidential READMEs तुमच्या device वर राहतात.
Rendered preview pane XSS-safe आहे का?
होय. innerHTML ला assigned प्रत्येक HTML string आधी DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) ने pass होतो. DOMPurify हे Cure53 ने maintained open-source XSS sanitizer आहे; Mozilla MDN, Atlassian, आणि Microsoft 365 user-supplied HTML harden करण्यासाठी हीच library वापरतात. Default html profile <script> elements, प्रत्येक on* event-handler attribute (onerror, onclick, इ.), href / src मधील javascript: URI schemes, आणि known-dangerous CSS expressions काढतो. <img src=x onerror=alert(1)> paste केल्यास preview मध्ये document.querySelector('#output-preview img[onerror]') null return करतो आणि कोणताही alert fire होत नाही.
GFM tables supported आहेत का?
होय. Markdown → HTML direction marked च्या GFM mode द्वारे pipe tables natively handle करतो — |---|---| alignment row ने separated header row, data rows सोबत, <thead> + <tbody> सोबत <table> produce करतो. Strikethrough (~~text~~ → <del>text</del>) आणि task lists (- [ ] / - [x] → <input type="checkbox">) GitHub प्रमाणेच render होतात.
माझे Markdown अचूकपणे convert होईल का?
Canonical GFM feature set साठी — headings h1 ते h6, ordered आणि unordered lists nesting सोबत, bold / italic / strikethrough, inline links, inline images, language tags सोबत fenced code blocks, inline code spans, pipe tables, task lists, blockquotes, horizontal rules, आणि autolinks — HTML output stable आहे आणि GitHub च्या renderer शी जुळतो. काही उल्लेखनीय वर्तन: Markdown मधील raw inline HTML (उदा. <sub>text</sub>) output मध्ये unchanged pass होतो, आणि CommonMark setext headings (=== underlines) आणि ATX headings (# Title) दोन्ही एकच <h1> produce करतात. हे documented marked behaviours आहेत, bugs नाहीत. उलट दिशा हवी असल्यास HTML ते Markdown tool वापरा.
Fenced code blocks मध्ये syntax highlighting supported आहे का?
v1 मध्ये नाही. Fenced code blocks monospaced font आणि subtle background सोबत render होतात पण per-language token highlighting शिवाय. Syntax highlighting जोडण्यासाठी Prism किंवा highlight.js bundle करणे लागेल, ज्यापैकी प्रत्येक 15–40 KB जोडतो plus per-language grammar file आणि theme matrix. सध्या, renderer correctness आणि XSS-safety वर focus करतो; inline highlighting साठी user demand असल्यास opt-in toggle tractable follow-up आहे.
हा Markdown ते HTML Converter marked@12.0.2 आणि DOMPurify@3.1.7 same origin वर bundled ship करतो, full GFM feature set support करतो, आणि DOM ला touch करण्यापूर्वी प्रत्येक rendered HTML string sanitize करतो. Upload नाही, CDN नाही, telemetry नाही — प्रत्येक byte तुमच्या browser मध्ये राहतो.