میں نے بغیر کسی لائبریری کے ایک لائیو Markdown ایڈیٹر بنایا
Markdown ایڈیٹر بنانے کے لیے آپ کو بھاری بھرکم لائبریریوں کی ضرورت نہیں ہے۔ میں نے تقریباً 40 لائنوں کے کوڈ میں ایک کام کرنے والا ورژن تیار کیا ہے۔ یہ ٹائپ کرتے ہی فوری طور پر HTML رینڈر کرتا ہے۔
یہ عمل پانچ مخصوص مراحل پر مشتمل ہے:
HTML کریکٹرز کو اسکیپ (Escape) کریں پہلے آپ کو < اور > جیسے علامتوں کو تبدیل کرنا ہوگا۔ یہ اسکرپٹ ٹیگز سے ہونے والے XSS حملوں کو روکتا ہے۔ اگر آپ اسے چھوڑ دیتے ہیں، تو آپ کا ایڈیٹر غیر محفوظ ہو جائے گا۔
کوڈ بلاکس کو محفوظ بنائیں کوڈ بلاکس کو نکالیں اور انہیں پلیس ہولڈرز (placeholders) سے بدل دیں۔ اس بات کو یقینی بنائیں کہ آپ کے فارمیٹنگ رولز کسی نمونے کے اندر موجود کوڈ کو خراب نہ کریں۔
بلاک رولز پر عمل کریں متن کی ہر لائن کا جائزہ لیں۔
- h1 ٹیگز بنانے کے لیے # کا استعمال کریں۔
- لسٹ آئٹمز بنانے کے لیے - کا استعمال کریں۔
- اقتباسات (quotes) بنانے کے لیے > کا استعمال کریں۔
لسٹ کی لائنوں کو ایک ہی
<ul>ٹیگ میں گروپ کریں۔
- ان لائن ریگولر ایکسپریشنز (regex) کا استعمال کریں ٹیکسٹ اسٹائلز کو سنبھالنے کے لیے ریگولر ایکسپریشنز کا استعمال کریں۔
- text کو strong ٹیگز میں تبدیل کریں۔
- text کو اینکر (anchor) ٹیگز میں تبدیل کریں۔ ترتیب اہم ہے۔ غلطیوں سے بچنے کے لیے اٹالکس (italics) سے پہلے بولڈ (bold) پر عمل کریں۔
- لائیو رینڈرنگ ہر کی اسٹروک (keystroke) پر پورے مواد کو دوبارہ رینڈر کریں۔ Markdown چھوٹا ہے اور اسے پروسیس (parse) کرنا تیز ہے۔ یہ فوری اسپلٹ اسکرین (split-screen) کا اثر پیدا کرتا ہے۔
منطق سادہ ہے: اسکیپ، محفوظ کریں، بلاک رولز، ان لائن ریگکس، اور رینڈر۔
لائیو ایڈیٹر یہاں آزمائیں: 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