মার্কডাউন টু HTML টুল ইমপ্লিমেন্টেশন নোট

ওভারভিউ

আমি VitePress প্রজেক্টে সফলভাবে একটি মার্কডাউন টু HTML টুল পেজ তৈরি করেছি। এই টুলটি ওপেন-সোর্স marked লাইব্রেরির উপর ভিত্তি করে তৈরি, রেফারেন্স ওয়েবসাইটের অনুরূপ ফিচার প্রদান করে।

ইমপ্লিমেন্টেশন ডিটেইলস

১. টেক স্ট্যাক

• VitePress - স্ট্যাটিক সাইট জেনারেটর
• Vue 3 - ফ্রন্টএন্ড ফ্রেমওয়ার্ক
• marked - মার্কডাউন টু HTML কোর লাইব্রেরি
• TypeScript - টাইপ সেফটি সাপোর্ট

২. ফাইল স্ট্রাকচার

docs/
├── .vitepress/
│   ├── components/
│   │   └── MarkdownToHtml.vue  # কোর কনভার্সন কম্পোনেন্ট
│   └── theme/
│       └── index.ts           # গ্লোবাল কম্পোনেন্ট রেজিস্ট্রেশন
└── markdown-to-html/
    ├── index.md              # মেইন পেজ
    ├── usage.md              # ব্যবহারের নির্দেশাবলী
    └── README.md             # এই ডকুমেন্ট

৩. কোর ফিচার

ইমপ্লিমেন্ট করা ফিচার

• ✅ রিয়েল-টাইম মার্কডাউন টু HTML কনভার্সন
• ✅ ম্যানুয়াল কনভার্সন মোড
• ✅ GFM (GitHub Flavored Markdown) সাপোর্ট
• ✅ এক-ক্লিক কপি কনভার্টেড রেজাল্ট
• ✅ এক-ক্লিক ডাউনলোড .html ফাইল
• ✅ ইনসার্ট স্যাম্পল ফিচার
• ✅ ক্লিয়ার কন্টেন্ট ফিচার
• ✅ এরর মেসেজ
• ✅ রেসপন্সিভ ডিজাইন
• ✅ ডার্ক মোড সাপোর্ট

UI ফিচার

• বাম-ডান স্প্লিট লেআউট (মার্কডাউন ইনপুট | HTML আউটপুট)
• মডার্ন UI ডিজাইন
• স্মুথ অ্যানিমেশন ইফেক্ট
• Toast মেসেজ
• মোবাইল অ্যাডাপ্টেশন

৪. ব্যবহারের পদ্ধতি

১. /markdown-to-html/ পেজে যান ২. বাম পাশে মার্কডাউন কোড ইনপুট করুন ৩. ডান পাশে স্বয়ংক্রিয়ভাবে কনভার্টেড HTML দেখাবে ৪. কপি বা ডাউনলোড বাটনে ক্লিক করে রেজাল্ট সেভ করুন

৫. ডিপেন্ডেন্সি কনফিগারেশন

package.json এ যোগ করা হয়েছে:

{
  "dependencies": {
    "marked": "^16.2.1"
  }
}

৬. নোট

১. কনভার্সন সম্পূর্ণ ব্রাউজারে হয়, সার্ভার প্রয়োজন নেই ২. সব সাধারণ মার্কডাউন এলিমেন্ট সাপোর্ট করে ৩. বিশেষ মার্কডাউন স্ট্রাকচার ম্যানুয়াল অ্যাডজাস্টমেন্ট প্রয়োজন হতে পারে ৪. প্রজেক্ট রুটে pnpm install রান করে ডিপেন্ডেন্সি ইনস্টল করার পরামর্শ দেওয়া হয়

পরবর্তী অপ্টিমাইজেশন সুপারিশ

১. আরও কনভার্সন অপশন যোগ করুন (যেমন হেডিং স্টাইল, লিস্ট সিম্বল ইত্যাদি) ২. কাস্টম CSS স্টাইল সাপোর্ট ৩. আরও মার্কডাউন এক্সটেনশন সিনট্যাক্স সাপোর্ট ৪. ব্যাচ কনভার্সন ফিচার ৫. কনভার্সন হিস্টোরি ফিচার

টেকনিক্যাল ডিটেইলস

marked লাইব্রেরি কনফিগারেশন

marked.setOptions({
  gfm: true,        // GFM সাপোর্ট সক্রিয়
  breaks: true,     // লাইন ব্রেক সাপোর্ট
  sanitize: false   // HTML ক্লিন করবেন না
})

কোর কনভার্সন লজিক

const htmlOutput = computed(() => {
  if (!markdownInput.value.trim()) return ''
  
  try {
    return marked.parse(markdownInput.value)
  } catch (error) {
    return `<div class="error-message">কনভার্সন এরর: ${error.message}</div>`
  }
})

রেসপন্সিভ ডিজাইন

• ডেস্কটপ: বাম-ডান স্প্লিট লেআউট
• মোবাইল: উপরে-নিচে স্ট্যাকড লেআউট
• অটো-অ্যাডজাস্ট ফন্ট সাইজ এবং স্পেসিং

সারসংক্ষেপ

মার্কডাউন টু HTML টুল সফলভাবে ইমপ্লিমেন্ট করা হয়েছে, সম্পূর্ণ কনভার্সন ফিচার এবং ভালো ইউজার এক্সপেরিয়েন্স প্রদান করে। এই টুলটি বেশিরভাগ মার্কডাউন টু HTML কনভার্সন প্রয়োজন মেটাতে পারে এবং এক্সটেনশন এবং মেইনটেন্যান্স সহজ।