Markdown سے HTML کنورٹر — Markdown کو HTML میں آن لائن تبدیل کریں _

Markdown سے HTML کنورژن کیا ہے؟

Markdown ایک ہلکا پھلکا plain-text فارمیٹ ہے جو منظم نثر کو انکوڈ کرنے کے لیے کم سے کم رموز استعمال کرتا ہے (# headings کے لیے، * emphasis کے لیے، - لسٹ آئٹمز کے لیے)۔ GitHub Flavored Markdown (GFM) اصل CommonMark spec کو tables، strikethrough، task lists اور autolinks سے بڑھاتا ہے۔ HTML وہ رینڈر شدہ شکل ہے جو براؤزر دکھاتا ہے۔ Markdown کو HTML میں تبدیل کرنا آپ کو ہلکی نحو میں لکھنے اور بغیر ٹیگز ہاتھ سے لکھے رینڈر شدہ سطح پر بھیجنے دیتا ہے۔

GitHub Flavored Markdown کے کون سے features سپورٹ ہیں؟

بنڈل شدہ marked@12.0.2 پارسر مکمل GFM سپر سیٹ کو سپورٹ کرتا ہے: ATX طرز کے headings # سے ###### تک، nesting کے ساتھ ordered اور unordered لسٹس، bold **text** اور italic *text*، strikethrough ~~text~~، inline links [text](url) اور inline images ![alt](src)، اختیاری language tag کے ساتھ fenced code blocks (```js)، inline code spans `code`، header rows کے ساتھ pipe tables، GFM task lists - [ ] / - [x]، blockquotes >، horizontal rules ---، اور autolinks۔ ہر ایک پریویو پین میں اسی طرح رینڈر ہوتا ہے جیسے GitHub رینڈر کرتا ہے۔

Markdown سے HTML کنورژن کیسے کام کرتی ہے؟

ہر کنورژن آپ کے براؤزر میں دو بنڈل شدہ لائبریریوں کے ساتھ مقامی طور پر چلتی ہے — کوئی CDN نہیں، کوئی fetch نہیں، کوئی telemetry نہیں۔ بلند سطحی اقدامات یہ ہیں:

1. Parse: marked.parse(source) آپ کا Markdown پڑھتا ہے اور ایک HTML string پیدا کرتا ہے۔ پارسر GFM موڈ میں چلتا ہے، تو tables، task lists، strikethrough اور autolinks سب پہچانے جاتے ہیں۔
2. Sanitize: HTML آؤٹ پٹ innerHTML پر سونپنے سے پہلے DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) سے گزرتی ہے۔ DOMPurify وہی XSS sanitizer ہے جو Mozilla MDN، Atlassian اور Microsoft 365 استعمال کرتے ہیں — یہ HTML پارس کرتا ہے، DOM پر چلتا ہے اور <script> عناصر، ہر on* event handler attribute اور javascript: URI schemes ہٹا دیتا ہے۔
3. Render: sanitize شدہ HTML innerHTML کے ذریعے preview pane میں لکھی جاتی ہے، اور خام HTML دوسرے پین میں read-only <textarea> کے ذریعے دکھایا جاتا ہے تاکہ آپ markup کاپی کر سکیں۔ لائیو موڈ ان پٹ کو 150 ms کے لیے debounce کرتا ہے تاکہ آپ ٹائپ کرتے وقت preview parser پر بوجھ ڈالے بغیر update ہو۔

اس ٹول سے Markdown کو HTML میں کیوں تبدیل کریں؟

• رازداری: ہر parse، sanitize اور render pass آپ کے براؤزر میں ہوتا ہے۔ Markdown — بشمول غیر شائع شدہ بلاگ پوسٹس، اندرونی documentation drafts اور confidential README مواد — کبھی ہمارے سرورز تک نہیں پہنچتا۔
• XSS-safe by default: رینڈر شدہ preview pane innerHTML سے پہلے ہر HTML string کو DOMPurify سے گزارتا ہے، تو Markdown کے اندر خام <script> ٹیگز یا onerror= handlers ایک inert preview پیدا کرتے ہیں۔ خام ٹیب inspection کے لیے unsanitized string دکھاتا ہے لیکن وہ read-only <textarea> کے ذریعے value میں ہوتی ہے — کبھی execute نہیں ہوتی۔
• GFM-complete: tables، strikethrough، task lists اور autolinks اسی طرح رینڈر ہوتے ہیں جیسے GitHub رینڈر کرتا ہے۔ Markdown pipe-table ایک HTML <table> بن جاتا ہے جس میں <thead> اور <tbody> ہوتے ہیں — کوئی گری ہوئی rows نہیں، کوئی چپٹی structure نہیں۔

Markdown سے HTML کنورژن کے عام استعمال کیا ہیں؟

Markdown کو HTML میں بدلنا documentation، static-site work اور email authoring میں نظر آتا ہے:

• GitHub README لکھنا: کسی پروجیکٹ کا README مقامی طور پر Markdown میں draft کرنا اور push کرنے سے پہلے رینڈر شدہ HTML کا preview کرنا۔ preview tables، task lists اور fenced code کے لیے GitHub کے GFM renderer سے ملتا ہے۔
• Static-site content: Markdown پوسٹ paste کرنا اور CMS فیلڈ یا templating engine کے لیے HTML حاصل کرنا جو Markdown سورس کی بجائے markup کی توقع کرتا ہو۔
• Email templates: transactional-email body کو Markdown کے طور پر لکھنا اور email service provider کے templating engine کے لیے HTML میں تبدیل کرنا۔ آؤٹ پٹ سادہ semantic HTML ہے — کوئی inline styles نہیں، کوئی email-client quirks نہیں۔

Markdown سے HTML تبدیلی کی مثال کیسی دکھتی ہے؟

# Title\n\n- item 1\n- item 2\n\n[link](https://example.com) paste کرنا ایک preview pane پیدا کرتا ہے جس میں <h1>Title</h1>، دو آئٹم unordered لسٹ اور <a href="https://example.com">link</a> ہوتا ہے۔ خام پین exact HTML string دکھاتا ہے تاکہ آپ اسے template میں کاپی کر سکیں۔ |---|---| alignment row والا pipe table مکمل <table> بن جاتا ہے جس میں <thead> اور <tbody> ہوتے ہیں — جو تصدیق کرتا ہے کہ GFM tables اسی طرح رینڈر ہوتے ہیں جیسے GitHub۔

کیا یہ Markdown سے HTML کنورٹر مکمل طور پر میرے براؤزر میں چلتا ہے؟

ہاں۔ ہر parse، sanitize اور render pass آپ کے براؤزر ٹیب کے اندر JavaScript کے طور پر مقامی طور پر چلتا ہے۔ بنڈل شدہ لائبریریاں — marked@12.0.2 اور DOMPurify@3.1.7 — صفحے کے ہی origin سے بھیجی جاتی ہیں، تو کوئی CDN انحصار نہیں، کوئی fetch نہیں، کوئی XMLHttpRequest نہیں، ان پٹ پر کوئی navigator.sendBeacon نہیں۔ ٹول صفحہ load ہونے کے بعد آف لائن بھی کام کرتا ہے۔ غیر شائع شدہ پوسٹس، اندرونی docs اور confidential READMEs آپ کے ڈیوائس پر رہتی ہیں۔

کیا رینڈر شدہ preview pane XSS-safe ہے؟

ہاں۔ ہر HTML string جو innerHTML پر سونپی جاتی ہے پہلے DOMPurify.sanitize(html, { USE_PROFILES: { html: true } }) سے گزرتی ہے۔ DOMPurify وہ open-source XSS sanitizer ہے جسے Cure53 برقرار رکھتا ہے؛ یہ وہی لائبریری ہے جو Mozilla MDN، Atlassian اور Microsoft 365 صارف فراہم کردہ HTML کو سخت بنانے کے لیے استعمال کرتے ہیں۔ ڈیفالٹ html پروفائل <script> عناصر، ہر on* event-handler attribute (onerror، onclick وغیرہ)، href / src کے اندر javascript: URI schemes اور معروف خطرناک CSS expressions ہٹا دیتا ہے۔ <img src=x onerror=alert(1)> پیسٹ کرنا ایک preview پیدا کرتا ہے جہاں document.querySelector('#output-preview img[onerror]') null واپس کرتا ہے اور کوئی alert نہیں چلتا۔

کیا GFM tables سپورٹ ہیں؟

ہاں۔ Markdown → HTML سمت pipe tables کو marked کے GFM موڈ کے ذریعے natively سنبھالتی ہے — header row جسے |---|---| alignment row الگ کرتی ہے، اس کے بعد data rows، ایک <table> پیدا کرتی ہے جس میں <thead> + <tbody> ہوتا ہے۔ Strikethrough (~~text~~ → <del>text</del>) اور task lists (- [ ] / - [x] → <input type="checkbox">) اسی طرح رینڈر ہوتے ہیں جیسے GitHub۔

کیا میرا Markdown درست طریقے سے تبدیل ہوگا؟

canonical GFM feature set کے لیے — headings h1 سے h6 تک، nesting کے ساتھ ordered اور unordered لسٹس، bold / italic / strikethrough، inline links، inline images، language tags کے ساتھ fenced code blocks، inline code spans، pipe tables، task lists، blockquotes، horizontal rules اور autolinks — HTML آؤٹ پٹ مستحکم ہے اور GitHub کے renderer سے ملتا ہے۔ کچھ قابل ذکر سلوکیات: Markdown کے اندر خام inline HTML (مثلاً <sub>text</sub>) آؤٹ پٹ میں بغیر تبدیلی گزرتا ہے، اور CommonMark setext headings (=== underlines) اور ATX headings (# Title) دونوں ایک ہی <h1> پیدا کرتے ہیں۔ یہ documented marked behaviours ہیں، bugs نہیں۔ اگر آپ کو الٹا چاہیے، HTML کو Markdown میں واپس لانے کے لیے HTML سے Markdown ٹول استعمال کریں۔

کیا fenced code blocks میں syntax highlighting سپورٹ ہے؟

v1 میں نہیں۔ Fenced code blocks monospace فونٹ اور ہلکے background کے ساتھ render ہوتے ہیں لیکن per-language token highlighting کے بغیر۔ syntax highlighting شامل کرنے کے لیے Prism یا highlight.js کو bundle کرنا پڑے گا، جن میں سے ہر ایک 15–40 KB کے علاوہ per-language grammar فائل اور theme matrix شامل کرتا ہے جسے Workshop Terminal palette سے ہم آہنگ کرنا ہوگا۔ فی الحال renderer correctness اور XSS-safety پر فوکس کرتا ہے؛ اگر inline highlighting کے لیے user demand ہو، تو opt-in toggle ایک قابل عمل follow-up ہے۔

یہ Markdown سے HTML کنورٹر marked@12.0.2 اور DOMPurify@3.1.7 کے ساتھ اسی origin پر bundle ہو کر آتا ہے، مکمل GFM feature set کو سپورٹ کرتا ہے اور ہر رینڈر شدہ HTML string کو DOM پر پہنچنے سے پہلے sanitize کرتا ہے۔ کوئی اپلوڈ نہیں، کوئی CDN نہیں، کوئی telemetry نہیں — ہر بائٹ آپ کے براؤزر میں رہتا ہے۔