Markdown প্রিভিউ

Markdown রেন্ডারার কী?#

Markdown হলো সেই সরল-টেক্সট শর্টহ্যান্ড যা ডেভেলপাররা ধনী টেক্সট লেখার জন্য ব্যবহার করে: **bold**, # headings, - lists, `code`। একটি রেন্ডারার হলো সেই প্রোগ্রাম যা সেই শর্টহ্যান্ড চিহ্নগুলোকে HTML-এ পরিণত করে যা একটি ব্রাউজার সত্যিই প্রদর্শন করে। README ফাইল, ডকুমেন্টেশন সাইট, issue-tracker মন্তব্য, চ্যাট অ্যাপ, এবং স্ট্যাটিক-সাইট জেনারেটরগুলো সবগুলো Markdown-কে আপনাকে দেখানোর আগে একটি রেন্ডারারের মাধ্যমে চালায়।

এই পৃষ্ঠাটি একটি Markdown রেন্ডারার যার একটি নির্দিষ্ট ডিজাইন অগ্রাধিকার আছে: এটি কনস্ট্রাকশন দ্বারা নিরাপদ, ফিল্টারিং দ্বারা নয়। বেশিরভাগ রেন্ডারার প্রথমে Markdown-কে HTML-এ পরিণত করে এবং তারপর ফলাফল থেকে বিপজ্জনক ট্যাগগুলো মুছে ফেলার চেষ্টা করে — এমন একটি মডেল যেখানে একটি মিস করা রেগেক্স মানে একটি XSS দুর্বলতা। এই টুলটি অন্যভাবে কাজ করে: উৎসের প্রতিটি অক্ষর যেকোনো ফরম্যাটিং প্রয়োগের আগে HTML-এস্কেপ করা হয়, এবং এটি যে ট্যাগগুলো নির্গত করে সেগুলো একটি নির্দিষ্ট, হার্ডকোডেড allow-list (p, h1–h6, ul, ol, li, blockquote, pre, code, hr, a, img, strong, em, del, br) থেকে আসে। আপনার ইনপুট থেকে একটি <script> ট্যাগ নির্গত করার কোনো কোড পথ নেই, কারণ উৎসের কাঁচা < ফরম্যাটার কখনো দেখার আগেই <-এ এস্কেপ করা হয়। এটিই এটিকে এই জাতীয় একটি কঠোর-CSP স্ট্যাটিক সাইটের জন্য উপযুক্ত করে তোলে।

এটি CommonMark-এর একটি কেন্দ্রিত উপসেট প্লাস GitHub-Flavored Markdown অপরিহার্য বস্তু বাস্তবায়ন করে: ফেন্সড কোড ব্লক, ATX শিরোনাম, প্যারাগ্রাফ, অর্ডারকৃত এবং অর্ডারহীন তালিকা, ব্লককোট, থিম্যাটিক বিরতি (---), ইনলাইন কোড, বোল্ড, ইটালিক, স্ট্রাইকথ্রু, ছবি, লিংক, এবং অ্যাঙ্গেল অটোলিংক। একই ইনপুট আপনাকে পাশাপাশি দুটি আউটপুট দেয় — রেন্ডার করা পূর্বরূপ এবং কাঁচা HTML — যাতে আপনি ঠিক দেখতে পান রেন্ডারারটি কী তৈরি করেছে।

কীভাবে ব্যবহার করবেন#

1. বাম পেনে Markdown টাইপ করুন, বা প্রতিটি সমর্থিত বৈশিষ্ট্য অনুশীলন করে এমন একটি বিল্ট-ইন নথি লোড করতে নমুনা ক্লিক করুন।
2. ডান পেনের উপরের দুটি বোতাম দিয়ে আউটপুট পরিবর্তন করুন:
   • প্রিভিউ ফরম্যাট করা ফলাফলটিকে একটি ওয়েব পৃষ্ঠায় যেমন দেখাবে তেমনভাবে দেখায়।
   • HTML রেন্ডারার যা নির্গত করেছে তার নির্দিষ্ট HTML দেখায়, যা আপনি একটি টেমপ্লেটে পেস্ট করবেন বা একটি স্যানিটাইজার নিরীক্ষায় হাতে দেবেন।
3. অন্যত্র ব্যবহারের জন্য তৈরি করা HTML ধরতে HTML কপি করুন ক্লিক করুন — একটি CMS-এ পেস্ট করা, একটি টেমপ্লেটে সন্নিবেশ করা, বা একটি পর্যালোচনার মাধ্যমে চালানো।
4. উভয় পেন খালি করতে মুছুন ক্লিক করুন।
5. স্ট্যাটাস লাইন রেন্ডার করা বাইট দৈর্ঘ্য রিপোর্ট করে বা উল্লেখ করে যখন ইনপুট খালি।

প্রধান বৈশিষ্ট্য#

• কনস্ট্রাকশন দ্বারা নিরাপদ। সমস্ত উৎস টেক্সট ফরম্যাটিংয়ের আগে HTML-এস্কেপ করা হয়, এবং রেন্ডারার কেবল ট্যাগের একটি নির্দিষ্ট allow-list নির্গত করে। “তারপর বিপজ্জনক অংশগুলো ছাঁটা” ধাপটি ভুল পাওয়ার কিছু নেই।
• বিপজ্জনক URL স্কিম বাদ দেওয়া হয়। লিংক এবং ছবি URL স্কিম-চেক করা হয়; javascript:, vbscript:, data:, file:, এবং about: অবরুদ্ধ, এবং ত্রুটিযুক্ত টেক্সটটি একটি লাইভ লিংক হওয়ার বদলে আক্ষরিকভাবে দেখানো হয়।
• দুটি ভিউ, এক উৎস। রেন্ডার করা পূর্বরূপ এবং কাঁচা HTML-এর মধ্যে টগল করুন পুনরায় টাইপ না করে, যাতে আপনি ভিজ্যুয়াল ফলাফল এবং এটি যে মার্কআপ তৈরি করেছে উভয় যাচাই করতে পারেন।
• GFM অপরিহার্য অন্তর্ভুক্ত। স্ট্রাইকথ্রু (~~text~~), ভাষা ইঙ্গিত সহ ফেন্সড কোড ব্লক, এবং টাস্ক-বান্ধব তালিকা GitHub-flavored Markdown যেভাবে করে সেভাবে আচরণ করে।
• শূন্য নির্ভরতা, ১০০% ক্লায়েন্ট-সাইড। রেন্ডারারটি স্ব-বাস্তবায়িত — কোনো বান্ডল করা পার্সিং লাইব্রেরি নেই — এবং সম্পূর্ণ আপনার ব্রাউজারে চলে। কিছুই আপলোড হয় না, এবং কিছু ইনজেক্ট করার জন্য কোনো ব্যাকএন্ড নেই।

ব্যবহারের উদাহরণ#

নমুনা ক্লিক করুন এবং বাম পেন মূল সিনট্যাক্স অনুশীলন করে এমন একটি নথি দিয়ে পূরণ হয়:

# Heading

A paragraph with **bold**, *italic*, ~~strike~~ and `inline code`.

- bullet one
- bullet two

1. first
2. second

> A blockquote.

[a link](https://example.com)

\`\`\`
const x = 42;
console.log(x);
\`\`\`

HTML-এ পরিবর্তন করুন এবং আপনি ঠিক যা রেন্ডারার নির্গত করেছে তা দেখেন। প্যারাগ্রাফটি হয়ে যায়:

<p>A paragraph with <strong>bold</strong>, <em>italic</em>,
<del>strike</del> and <code>inline code</code>.</p>

লিংকটি নিরাপদ rel/অ্যাট্রিবিউট সহ একটি হার্ড টার্গেট হয়ে যায়:

<a href="https://example.com" rel="noopener noreferrer" target="_blank">a link</a>

এবং ফেন্সড ব্লকটি একটি এস্কেপ করা <pre><code> হয়ে যায় যা উৎসকে আক্ষরিকভাবে সংরক্ষণ করে — const x = 42; টেক্সট হিসেবে দেখায়, সম্পাদিত স্ক্রিপ্ট হিসেবে নয়। সেই শেষ পয়েন্টটি হলো পুরো নিরাপত্তা গল্প ছোট আকারে: এমনকি আপনি উৎসে <script>alert(1)</script> পেস্ট করলেও, এটি আক্ষরিক টেক্সট <script>alert(1)</script> হিসেবে রেন্ডার হবে, কারণ < ফরম্যাটার কখনো স্থির করার আগেই <-এ এস্কেপ করা হয় কী একটি ট্যাগ।

প্রশ্নোত্তর#

আমি কেন সরাসরি HTML লেখার বদলে এটি ব্যবহার করব?#

কারণ Markdown টাইপ করা দ্রুত, উৎস ফর্মে পড়তে সহজ, এবং অ-HTML-সচেতন অবদানকারীদের বিষয়বস্তু লিখতে দেয়। এই রেন্ডারারটি তখনের জন্য যখন আপনি সেই সুবিধা চান একটি সাধারণ পার্সিং লাইব্রেরিতেও নিরাপদ হওয়ার আস্থা না রেখে — নিরাপত্তা এখানে আর্কিটেকচার থেকে আসে, শেষে বোল্ট করা একটি স্যানিটাইজার থেকে নয়।

আমি একটি <script> ট্যাগ পেস্ট করেছি এবং এটি টেক্সট হিসেবে দেখায়। এটি কি একটি বাগ?#

না — সেটিই উদ্দেশ্যকৃত আচরণ এবং মূল নিরাপত্তা গ্যারান্টি। আপনার ইনপুটের প্রতিটি অক্ষর ফরম্যাটিংয়ের আগে HTML-এস্কেপ করা হয়, তাই উৎসে থাকা যেকোনো ট্যাগের মতো টেক্সট নিষ্ক্রিয় দৃশ্যমান টেক্সট হিসেবে রেন্ডার হয়। এই রেন্ডারারের মাধ্যমে আউটপুটে একটি লাইভ <script> পাওয়ার কোনো উপায় নেই।

আমার javascript: লিংক কেন সাধারণ টেক্সট হিসেবে দেখানো হলো?#

রেন্ডারারটি প্রতিটি লিংক এবং ছবি URL স্কিম-চেক করে। javascript:, vbscript:, data:, file:, এবং about:-এর মতো স্কিমগুলো অবরুদ্ধ কারণ সেগুলো হলো ইনজেকশন আক্রমণের ক্লাসিক ভেক্টর। একটি URL অবরুদ্ধ হলে, রেন্ডারারটি মূল Markdown উৎসটিকে আক্ষরিক টেক্সট হিসেবে রাখে একটি বিপজ্জনক অ্যাঙ্কর নির্গত করার বদলে।

এটি কি টেবিল, টাস্ক তালিকা, বা ফুটনোট সমর্থন করে?#

না — এটি CommonMark প্লাস GFM অপরিহার্য (ফেন্সড কোড, স্ট্রাইকথ্রু, অটোলিংক)-এর একটি ইচ্ছাকৃত, কেন্দ্রিত উপসেট। টেবিল এবং ফুটনোটের একটি সমৃদ্ধ পার্সার এবং পুলিশ করার জন্য একটি বড় আক্রমণ পৃষ্ঠের প্রয়োজন; সেগুলো ইচ্ছাকৃতভাবে এখানে সুযোগের বাইরে। উপরের বৈশিষ্ট্যগুলোতে তালিকাভুক্ত সমর্থিত কনস্ট্রাক্টগুলোর সাথে লেগে থাকুন।