MDX কী?

MDX হলো একটি ফরম্যাট যা আপনাকে Markdown ডকুমেন্টের ভেতরে সরাসরি JSX লিখতে দেয়। এটি কন্টেন্ট তৈরির জন্য Markdown-এর সরলতা এবং React কম্পোনেন্টের শক্তিকে একত্রিত করে, যা Next.js, Gatsby এবং Docusaurus-এর মতো ফ্রেমওয়ার্ক দিয়ে তৈরি ডকুমেন্টেশন সাইট, ব্লগ এবং কন্টেন্ট-সমৃদ্ধ অ্যাপ্লিকেশনের জন্য জনপ্রিয়। একটি MDX ফাইলে স্ট্যান্ডার্ড Markdown সিনট্যাক্সের পাশাপাশি import স্টেটমেন্ট, এক্সপোর্ট করা ভেরিয়েবল এবং ইনলাইন JSX কম্পোনেন্ট — সবকিছু একটি ফাইলেই থাকতে পারে।

সাধারণ Markdown-এর বিপরীতে, MDX JavaScript-এ কম্পাইল হয়, যার মানে আপনার JSX বা import স্টেটমেন্টে সিনট্যাক্স ত্রুটি পুরো ডকুমেন্টটি ভেঙে দিতে পারে। এটি MDX কন্টেন্টের সাথে কাজ করার সময় যাচাইকরণ এবং সঠিক ফরম্যাটিংকে বিশেষভাবে গুরুত্বপূর্ণ করে তোলে।

টুলের বিবরণ

MDX এডিটর MDX কন্টেন্ট লেখা, যাচাই করা এবং ফরম্যাট করার জন্য একটি ব্রাউজার-ভিত্তিক পরিবেশ প্রদান করে। এতে Markdown এবং JSX উভয়ের জন্য সিনট্যাক্স হাইলাইটিং, একটি বিল্ট-ইন ভ্যালিডেটর যা কম্পাইলেশন ত্রুটির জন্য আপনার MDX পরীক্ষা করে, এবং একটি ফরম্যাটার রয়েছে যা সামঞ্জস্যপূর্ণ ও পাঠযোগ্য ডকুমেন্টের জন্য স্পেসিং এবং কাঠামো পরিষ্কার করে।

উদাহরণ

ফরম্যাটিংয়ের আগে:

import {Chart} from './components'
# Dashboard
Some intro text.


Extra blank lines here.
## Section
<Chart data={stats} />

ফরম্যাটিংয়ের পরে:

import {Chart} from './components'

# Dashboard

Some intro text.

Extra blank lines here.

## Section

<Chart data={stats} />

বৈশিষ্ট্যসমূহ

  • একটি এডিটরে Markdown এবং JSX-এর জন্য সিনট্যাক্স হাইলাইটিং
  • রিয়েল টাইমে কম্পাইলেশন ত্রুটি পরীক্ষা করার জন্য MDX ভ্যালিডেশন
  • স্বয়ংক্রিয় ফরম্যাটিং যা ফাঁকা লাইন এবং স্পেসিং স্বাভাবিক করে
  • এডিটর দ্রুত রিসেট করতে ক্লিয়ার বাটন
  • আপনার ফরম্যাট করা কন্টেন্ট সহজে এক্সপোর্ট করার জন্য কপি সাপোর্ট

এটি কীভাবে কাজ করে

  • যাচাই করুন: @mdx-js/mdx কম্পাইলার ব্যবহার করে আপনার MDX কন্টেন্ট কম্পাইল করে। ডকুমেন্টে যদি সিনট্যাক্স ত্রুটি থাকে — যেমন ভুল গঠনের JSX, অবন্ধ ট্যাগ বা অবৈধ import — ভ্যালিডেটর ত্রুটির বার্তা প্রদর্শন করে যাতে আপনি তা ঠিক করতে পারেন।
  • ফরম্যাট করুন: একাধিক পরপর ফাঁকা লাইনকে একটিতে সংকুচিত করে, হেডিংয়ের আগে এবং import/export ব্লকের চারপাশে ফাঁকা লাইন নিশ্চিত করে এবং শেষের অতিরিক্ত স্পেস ছেঁটে হোয়াইটস্পেস স্বাভাবিক করে। ফলাফল হলো একটি পরিষ্কার, সামঞ্জস্যপূর্ণভাবে কাঠামোবদ্ধ ডকুমেন্ট।

ব্যবহারের ক্ষেত্রসমূহ

  • কন্টেন্ট পেজের জন্য MDX ব্যবহার করে এমন React-ভিত্তিক প্রজেক্টের ডকুমেন্টেশন লেখা
  • স্ট্যাটিক সাইট ডিপ্লয় করার আগে MDX কম্পাইলেশন ত্রুটি ডিবাগ করা
  • একাধিক লেখকের অবদানে অসামঞ্জস্যপূর্ণ স্পেসিং সহ MDX ফাইল পরিষ্কার করা