আমি কোনো লাইব্রেরি ছাড়াই একটি লাইভ মার্কডাউন এডিটর তৈরি করেছি
একটি মার্কডাউন এডিটর তৈরি করতে আপনার ভারী কোনো লাইব্রেরির প্রয়োজন নেই। আমি মাত্র ৪০ লাইনের কোড দিয়ে একটি কার্যকরী সংস্করণ তৈরি করেছি। আপনি টাইপ করার সাথে সাথেই এটি তাৎক্ষণিকভাবে HTML রেন্ডার করে।
এই প্রক্রিয়াটি পাঁচটি নির্দিষ্ট ধাপ অনুসরণ করে:
১. HTML ক্যারেক্টার এস্কেপ করা আপনাকে প্রথমে < এবং > এর মতো চিহ্নগুলো প্রতিস্থাপন করতে হবে। এটি স্ক্রিপ্ট ট্যাগ থেকে XSS অ্যাটাক প্রতিরোধ করে। আপনি যদি এটি বাদ দেন, তবে আপনার এডিটরটি অনিরাপদ হবে।
২. কোড ব্লক সুরক্ষিত করা কোড ব্লকগুলো আলাদা করুন এবং সেগুলোকে প্লেসহোল্ডার (placeholder) দিয়ে প্রতিস্থাপন করুন। এটি নিশ্চিত করে যে আপনার ফরম্যাটিং নিয়মগুলো স্যাম্পলের ভেতরের কোডকে নষ্ট করে না।
৩. ব্লক রুলস প্রসেস করা টেক্সটের প্রতিটি লাইন পরীক্ষা করুন।
- h1 ট্যাগ তৈরি করতে # ব্যবহার করুন।
- লিস্ট আইটেম তৈরি করতে - ব্যবহার করুন।
- কোট (quote) তৈরি করতে > ব্যবহার করুন। লিস্টের লাইনগুলোকে একটি একক ul ট্যাগে গ্রুপ করুন।
৪. ইনলাইন রেজেক্স (inline regex) প্রয়োগ করা টেক্সট স্টাইল হ্যান্ডেল করার জন্য রেগুলার এক্সপ্রেশন ব্যবহার করুন।
- text কে strong ট্যাগে রূপান্তর করুন।
- text কে anchor ট্যাগে রূপান্তর করুন। ক্রমটি গুরুত্বপূর্ণ। ভুল এড়াতে ইটালিকস (italics) করার আগে বোল্ড (bold) প্রসেস করুন।
৫. লাইভ রেন্ডার প্রতিটি কি-স্ট্রোকের (keystroke) সাথে পুরো কন্টেন্টটি পুনরায় রেন্ডার করুন। মার্কডাউন ছোট এবং দ্রুত পার্স (parse) করা যায়। এটি তাৎক্ষণিক স্প্লিট-স্ক্রিন ইফেক্ট তৈরি করে।
লজিকটি সহজ: এস্কেপ, সুরক্ষা, ব্লক রুলস, ইনলাইন রেজেক্স এবং রেন্ডার।
লাইভ এডিটরটি এখানে চেষ্টা করুন: https://dev48v.infy.uk/solve/day11-markdown-editor.html
উৎস: https://dev.to/dev48v/i-built-a-live-markdown-editor-with-no-library-40-lines-3ln9