§

HTML পেস্ট করুন

§

কাঁচা

§

প্রিভিউ

প্রিভিউ DOMPurify-এর মাধ্যমে sanitize করা হয় — script tag, event handler এবং javascript: URI render-এর আগে সরানো হয়।

বাংলাদেশ ও পশ্চিমবঙ্গের technical writer, open-source maintainer এবং platform engineer-রা প্রতিদিন Markdown নিয়ে কাজ করেন। GitHub README, Stack Overflow উত্তর, Dev.to পোস্ট এবং Notion ডকুমেন্ট — সব Markdown parser-এর মধ্য দিয়ে যায়। MkDocs বা Sphinx pipeline-এ Markdown থেকে static documentation portal তৈরি করা, বা WordPress বা Ghost পোস্টকে Hugo বা Jekyll-এর জন্য Markdown-এ রূপান্তর করা — এই টুলটি সব কাজ ব্রাউজারেই করে, অপ্রকাশিত পোস্ট বা confidential README বাইরে পাঠায় না।

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

HTML হলো ব্রাউজার প্রদর্শিত rendered markup — <h1>, <ul>, <table>, <a>, এবং বাকি সব। Markdown হলো একটি lightweight plain-text ফরম্যাট যা minimal punctuation (# heading-এর জন্য, * emphasis-এর জন্য, - list item-এর জন্য) ব্যবহার করে একই structure encode করে। GitHub Flavored Markdown (GFM) table, strikethrough, task list, এবং autolink দিয়ে original CommonMark spec প্রসারিত করে। HTML থেকে Markdown রূপান্তর rendered বা exported HTML-কে editable plain-text Markdown-এ ফিরিয়ে আনে — ঠিক যা CMS থেকে content migration বা README পরিষ্কারের জন্য প্রয়োজন।

আউটপুটে কোন GitHub Flavored Markdown feature সমর্থিত?

Bundled turndown@7.2.0 engine turndown-plugin-gfm extension-সহ আপনার HTML থেকে সম্পূর্ণ GFM superset নির্গত করে: <h1><h6> থেকে ATX-style heading # থেকে ######, nested ordered ও unordered list, bold **text** ও italic *text*, <del> থেকে strikethrough ~~text~~, inline link [text](url) ও image ![alt](src), language hint সহ fenced code block (```js), inline code span `code`, <table> থেকে pipe table, checkbox input থেকে GFM task list - [ ] / - [x], blockquote >, এবং horizontal rule ---। প্রিভিউ পেন নির্গত Markdown-কে marked@12.0.2 দিয়ে পুনরায় রেন্ডার করে যাতে রূপান্তর দৃশ্যত নিশ্চিত করা যায়।

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

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

  1. Sanitize: পেস্ট করা HTML প্রথমে DOMPurify.sanitize(html, { USE_PROFILES: { html: true } })-এর মধ্য দিয়ে চলে যাতে <script> element, প্রতিটি on* event handler, এবং javascript: URI সরানো হয় কোনো code markup-এ পা রাখার আগেই। DOMPurify Mozilla MDN, Atlassian, এবং Microsoft 365 দ্বারা ব্যবহৃত XSS sanitizer।
  2. Convert: turndownService.turndown cleaned DOM walk করে GitHub Flavored Markdown নির্গত করে — heading গুলো # prefix হয়, list গুলো - / 1. item হয়, <table> pipe table হয়, ইত্যাদি। Markdown read-only output <textarea>-এ value-এর মাধ্যমে লেখা হয় (কখনো innerHTML নয়), তাই এটি স্বাভাবিকভাবেই নিরাপদ।
  3. Render: নির্গত Markdown-কে marked.parse দিয়ে পুনরায় parse, DOMPurify দিয়ে পুনরায় sanitize, এবং প্রিভিউ পেনের innerHTML-এ assign করা হয় যাতে দৃশ্যত নিশ্চিত হয় যে Markdown প্রত্যাশিত structure-এ round-trip করে। Live মোড 150 ms debounce করে যাতে পেস্ট করার সময় parser এর উপর চাপ না দিয়ে আউটপুট আপডেট হয়।

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

  • গোপনীয়তা: প্রতিটি sanitize, convert, এবং render pass আপনার ব্রাউজারে হয়। HTML — exported CMS post, internal documentation, এবং confidential page source সহ — কখনো আমাদের সার্ভারে পৌঁছায় না।
  • ডিফল্টে XSS-safe: পেস্ট করা HTML turndown-এর আগে DOMPurify-এর মধ্য দিয়ে চলে, এবং প্রিভিউ পেন innerHTML-এর আগে প্রতিটি HTML string DOMPurify দিয়ে পুনরায় চালায়, তাই <script> tag বা onerror= handler সহ markup পেস্ট করলে inert প্রিভিউ এবং পরিষ্কার Markdown পাওয়া যায়।
  • GFM-সম্পূর্ণ: <table> element Markdown pipe table-এ রূপান্তর হয়, <del> strikethrough-এ, এবং checkbox list GFM task list-এ। বেশিরভাগ অনলাইন converter HTML → Markdown পথে table drop করে দেয় — bundled turndown-plugin-gfm extension সেগুলো সংরক্ষণ করে।

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

HTML থেকে Markdown রূপান্তর করা content migration, documentation, এবং archiving জুড়ে দেখা যায়:

  • CMS migration: WordPress বা Ghost পোস্ট HTML হিসেবে export করা এবং Hugo / Jekyll / 11ty / Astro static-site rebuild-এর জন্য Markdown-এ রূপান্তর করা। রূপান্তর heading level, link, list, ও inline emphasis সংরক্ষণ করে।
  • README পরিষ্কার: কোনো wiki পেজ বা web article-এর rendered HTML পেস্ট করা এবং project README বা docs site-এর জন্য editable Markdown-এ ফিরিয়ে আনা, structure হাতে পুনরায় টাইপ না করে।
  • Archiving এবং notes: HTML email বা web clipping capture করা এবং Obsidian, Notion, বা plain-text knowledge base-এ সংরক্ষণের জন্য Markdown-এ রূপান্তর করা — Markdown diff-friendly থাকে এবং format পরিবর্তন থেকে রক্ষা পায়।

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

<h2>Heading</h2><ul><li>a</li><li>b<ul><li>nested</li></ul></li></ul> পেস্ট করলে ## Heading, nested bullet list সহ Markdown এবং একই nested structure-এ re-render করা প্রিভিউ পেন তৈরি হয়। header row ও দুটি data row সহ <table> পেস্ট করলে সমতুল্য | col | col | pipe table পাওয়া যায় — রূপান্তর heading, list, এবং table সংরক্ষণ করে এটি নিশ্চিত করে।

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

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

Rendered প্রিভিউ পেন কি XSS-safe?

হ্যাঁ। পেস্ট করা HTML DOMPurify.sanitize-এর মধ্য দিয়ে যায় turndown-এর আগে, এবং 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, ইত্যাদি), javascript: URI scheme, এবং পরিচিত-বিপজ্জনক CSS expression সরিয়ে দেয়। <img src=x onerror=alert(1)> পেস্ট করলে document.querySelector('#output-preview img[onerror]') null return করে এবং কোনো alert fire হয় না।

HTML থেকে GFM table রূপান্তর হয় কি?

হ্যাঁ। HTML → Markdown দিক turndown-plugin-gfm ব্যবহার করে, যা একটি custom turndown rule যোগ করে যা <table> node walk করে এবং সমতুল্য pipe-table Markdown নির্গত করে — একটি header row, একটি |---|---| alignment row, তারপর data row। বেশিরভাগ অনলাইন converter এই পথে table drop করে — এটি সেগুলো সংরক্ষণ করে। Strikethrough (<del>text</del>~~text~~) এবং task list (<input type="checkbox">- [ ] / - [x]) একইভাবে রূপান্তর হয়।

আমার HTML কি পরিষ্কারভাবে রূপান্তর হবে?

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 — রূপান্তর পরিষ্কার এবং পূর্বানুমানযোগ্য। edge case: HTML comment (<!-- ... -->) সরানো হয় (Markdown-এ কোনো comment syntax নেই); inline styling এবং class attribute বাদ যায় কারণ Markdown-এ কোনো সমতুল্য নেই; এবং অস্বাভাবিক inline tag যেমন <sub> / <sup> plain text-এ রূপান্তর হয়। এগুলো documented turndown আচরণ, bug নয়।

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 প্রয়োজন। এখনো renderer correctness ও XSS-safety-তে মনোযোগ দেয়; user চাহিদা থাকলে opt-in toggle একটি tractable follow-up।

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