Markdown থেকে HTML Converter — অনলাইনে Markdown কে HTML-এ রূপান্তর করুন _

Markdown থেকে HTML রূপান্তর কী?

Markdown হলো একটি lightweight plain-text ফরম্যাট যা structured prose encode করতে minimal punctuation ব্যবহার করে (# heading-এর জন্য, * emphasis-এর জন্য, - list item-এর জন্য)। GitHub Flavored Markdown (GFM) table, strikethrough, task list, এবং autolink দিয়ে original CommonMark spec প্রসারিত করে। HTML হলো ব্রাউজার display করা rendered form। Markdown কে HTML-এ রূপান্তর করা lightweight syntax-এ লেখা ও হাতে tag না লিখে rendered surface-এ ship করার সুযোগ দেয়।

কোন GitHub Flavored Markdown features সমর্থিত?

Bundled marked@12.0.2 parser সম্পূর্ণ GFM superset সমর্থন করে: ATX-style heading # থেকে ######, nested ordered ও unordered list, bold **text** ও italic *text*, strikethrough ~~text~~, inline link [text](url) ও inline image ![alt](src), optional language tag সহ fenced code block (```js), inline code span `code`, header row সহ pipe table, GFM task list - [ ] / - [x], blockquote >, horizontal rule ---, এবং autolink। প্রতিটি preview pane-এ ঠিক সেভাবে render হয় যেভাবে GitHub render করে।

Markdown থেকে HTML রূপান্তর কীভাবে কাজ করে?

প্রতিটি রূপান্তর দুটি bundled লাইব্রেরি ব্যবহার করে আপনার ব্রাউজারে locally চলে — কোনো CDN নেই, কোনো fetch নেই, কোনো telemetry নেই। উচ্চ-স্তরের ধাপ:

1. Parse: marked.parse(source) আপনার Markdown পড়ে একটি HTML string তৈরি করে। Parser GFM mode-এ চলে, তাই table, task list, strikethrough, এবং autolink সব চেনা যায়।
2. Sanitize: HTML আউটপুট innerHTML-এ assign করার আগে DOMPurify.sanitize(html, { USE_PROFILES: { html: true } })-এর মধ্য দিয়ে চলে। DOMPurify Mozilla MDN, Atlassian, এবং Microsoft 365 দ্বারা ব্যবহৃত XSS sanitizer — এটি HTML parse করে, DOM walk করে, এবং <script> element, প্রতিটি on* event handler attribute, ও javascript: URI scheme সরিয়ে দেয়।
3. Render: sanitized HTML innerHTML-এর মাধ্যমে preview pane-এ লেখা হয়, এবং raw HTML দ্বিতীয় pane-এ read-only <textarea>-এর মাধ্যমে দেখানো হয় যাতে markup কপি করা যায়। Live মোড 150 ms debounce করে যাতে parser-এর উপর চাপ না দিয়ে টাইপ করার সময় preview আপডেট হয়।

এই টুল দিয়ে Markdown কে HTML-এ কেন রূপান্তর করবেন?

• গোপনীয়তা: প্রতিটি parse, sanitize, এবং render pass আপনার ব্রাউজারে হয়। Markdown — অপ্রকাশিত blog post, internal documentation draft, এবং confidential README content সহ — কখনো আমাদের সার্ভারে পৌঁছায় না।
• ডিফল্টে XSS-safe: rendered preview pane innerHTML-এর আগে প্রতিটি HTML string DOMPurify-এর মধ্য দিয়ে চালায়, তাই আপনার Markdown-এ কাঁচা <script> tag বা onerror= handler থাকলেও একটি inert preview তৈরি হয়। raw tab inspection-এর জন্য unsanitized string দেখায় কিন্তু এটি read-only <textarea>-এর ভেতরে value-এর মাধ্যমে থাকে — কখনো execute হয় না।
• GFM-সম্পূর্ণ: table, strikethrough, task list, এবং autolink ঠিক সেভাবে render হয় যেভাবে GitHub render করে। Markdown pipe-table <thead> ও <tbody> সহ HTML <table> হয়ে যায় — কোনো row পড়ে যায় না, কোনো flattened structure নেই।

Markdown থেকে HTML রূপান্তরের সাধারণ প্রয়োগ কী?

Markdown কে HTML-এ রূপান্তর করা documentation, static-site কাজ, এবং email authoring জুড়ে দেখা যায়:

• GitHub README লেখা: একটি project README locally Markdown-এ draft করা এবং push করার আগে rendered HTML preview করা। preview GitHub-এর GFM renderer-এর সাথে table, task list, ও fenced code-এর জন্য মিলে।
• Static-site content: Markdown পোস্ট paste করা এবং CMS field বা templating engine-এর জন্য HTML নেওয়া যা Markdown source-এর বদলে markup আশা করে।
• Email template: transactional-email body Markdown-এ লেখা এবং email service provider-এর templating engine-এর জন্য HTML-এ রূপান্তর করা। আউটপুট হলো plain semantic HTML — কোনো inline style নেই, কোনো email-client quirk নেই।

Markdown থেকে HTML রূপান্তরের উদাহরণ কেমন দেখায়?

# Title\n\n- item 1\n- item 2\n\n[link](https://example.com) পেস্ট করলে <h1>Title</h1>, দুই-আইটেমের unordered list, এবং <a href="https://example.com">link</a> সহ একটি preview pane তৈরি হয়। raw pane exact HTML string দেখায় যাতে সরাসরি template-এ কপি করা যায়। |---|---| alignment row সহ একটি pipe table <thead> ও <tbody> সহ সম্পূর্ণ <table> হয়ে যায় — নিশ্চিত করে যে GFM table ঠিক GitHub-এর মতো render হয়।

এই Markdown থেকে HTML converter কি সম্পূর্ণ আমার ব্রাউজারে চলে?

হ্যাঁ। প্রতিটি parse, sanitize, এবং render pass আপনার ব্রাউজার ট্যাবে JavaScript হিসেবে locally চলে। bundled লাইব্রেরিগুলো — marked@12.0.2 এবং DOMPurify@3.1.7 — পেজের মতো একই origin থেকে shipped, তাই কোনো CDN dependency নেই, কোনো fetch নেই, কোনো XMLHttpRequest নেই, ইনপুটে কোনো navigator.sendBeacon নেই। টুলটি পেজ লোড হলে offline-ও কাজ করে। অপ্রকাশিত পোস্ট, internal doc, এবং confidential README আপনার ডিভাইসেই থাকে।

Rendered preview pane কি XSS-safe?

হ্যাঁ। innerHTML-এ assign করা প্রতিটি HTML string প্রথমে DOMPurify.sanitize(html, { USE_PROFILES: { html: true } })-এর মধ্য দিয়ে যায়। DOMPurify হলো Cure53 দ্বারা maintained open-source XSS sanitizer; এটি Mozilla MDN, Atlassian, এবং Microsoft 365 দ্বারা user-supplied HTML harden করতে ব্যবহৃত একই লাইব্রেরি। default html profile <script> element, প্রতিটি on* event-handler attribute (onerror, onclick, ইত্যাদি), href / src-এর ভেতরে javascript: URI scheme, এবং পরিচিত-বিপজ্জনক CSS expression সরিয়ে দেয়।

GFM table কি সমর্থিত?

হ্যাঁ। Markdown → HTML দিক marked-এর GFM মোডের মাধ্যমে pipe table natively handle করে — |---|---| alignment row দ্বারা পৃথক header row, তারপর data row, <thead> + <tbody> সহ একটি <table> তৈরি করে। Strikethrough (~~text~~ → <del>text</del>) ও task list (- [ ] / - [x] → <input type="checkbox">) ঠিক GitHub-এর মতো render হয়।

আমার Markdown কি সঠিকভাবে রূপান্তরিত হবে?

canonical GFM feature set-এর জন্য — heading h1 থেকে h6, nested ordered ও unordered list, bold / italic / strikethrough, inline link, inline image, language tag সহ fenced code block, inline code span, pipe table, task list, blockquote, horizontal rule, এবং autolink — HTML output স্থিতিশীল এবং GitHub-এর renderer-এর সাথে মেলে। কিছু উল্লেখযোগ্য আচরণ: Markdown-এর ভেতরে raw inline HTML (যেমন <sub>text</sub>) output-এ unchanged pass through হয়, এবং CommonMark setext heading (=== underline) ও ATX heading (# Title) দুটোই একই <h1> তৈরি করে। এগুলো documented marked আচরণ, bug নয়। বিপরীত দিক দরকার হলে HTML থেকে Markdown টুল ব্যবহার করুন।

Fenced code block-এ syntax highlighting সমর্থিত?

v1-এ নয়। Fenced code block monospaced font ও সূক্ষ্ম background সহ render হয় কিন্তু per-language token highlighting ছাড়া। Syntax highlighting যোগ করতে Prism বা highlight.js bundle করতে হবে, প্রতিটি 15–40 KB plus per-language grammar ফাইল এবং Workshop Terminal palette-এর সাথে alignment প্রয়োজন এমন একটি theme matrix যোগ করে। এখনো renderer correctness ও XSS-safety-তে মনোযোগ দেয়; user চাহিদা থাকলে opt-in toggle একটি tractable follow-up।

এই Markdown থেকে HTML Converter একই origin-এ bundled marked@12.0.2 এবং DOMPurify@3.1.7 সহ ship করে, সম্পূর্ণ GFM feature set সমর্থন করে, এবং DOM স্পর্শ করার আগে প্রতিটি rendered HTML string sanitize করে। কোনো আপলোড নেই, কোনো CDN নেই, কোনো telemetry নেই — প্রতিটি byte আপনার ব্রাউজারে থাকে।