𝗜 𝗕𝘂𝗶𝗹𝘁 𝗔 𝗟𝗶𝘃𝗲 𝗠𝗮𝗿𝗸𝗱𝗼𝘄𝗻 𝗘𝗱𝗶𝘁𝗼𝗿 𝗪𝗶𝘁𝗵 𝗡𝗼 𝗟𝗶𝗯𝗿𝗮𝗿𝘆
ஒரு Markdown எடிட்டரை உருவாக்க உங்களுக்குக் கனமான லைப்ரரிகள் (libraries) தேவையில்லை. நான் சுமார் 40 வரிகளில் ஒரு செயல்பாட்டுப் பதிப்பை உருவாக்கினேன். நீங்கள் தட்டச்சு செய்யும்போதே இது உடனடியாக HTML-ஐத் திரையில் காட்டும்.
இந்தச் செயல்முறை ஐந்து குறிப்பிட்ட படிகளைப் பின்பற்றுகிறது:
HTML எழுத்துக்களைத் தடுத்தல் (Escape HTML characters) முதலில் < மற்றும் > போன்ற குறியீடுகளை நீங்கள் மாற்ற வேண்டும். இது ஸ்கிரிப்ட் டேக்குகளில் (script tags) இருந்து வரும் XSS தாக்குதல்களைத் தடுக்கிறது. இதை நீங்கள் தவிர்க்க நேர்ந்தால், உங்கள் எடிட்டர் பாதுகாப்பற்றதாக இருக்கும்.
கோட் பிளாக்குகளைப் (code blocks) பாதுகாத்தல் கோட் பிளாக்குகளைப் பிரித்தெடுத்து, அவற்றுக்குப் பதிலாக பிளேஸ்ஹோல்டர்களை (placeholders) இடவும். இது உங்கள் ஃபார்மேட்டிங் விதிகள் ஒரு உதாரணத்திற்குள் இருக்கும் கோடைப் பாதிக்காமல் இருப்பதை உறுதி செய்கிறது.
பிளாக் விதிகளைச் செயலாக்குதல் (Process block rules) உரையின் ஒவ்வொரு வரியையும் ஆய்வு செய்யவும்.
- h1 டேக்குகளை உருவாக்க # ஐப் பயன்படுத்தவும்.
- பட்டியல் உருப்படிகளை (list items) உருவாக்க - ஐப் பயன்படுத்தவும்.
- மேற்கோள்களை (quotes) உருவாக்க > ஐப் பயன்படுத்தவும்.
பட்டியல் வரிகளை ஒரே
<ul>டேக்கிற்குள் தொகுக்கவும்.
- இன்லைன் ரெஜெக்ஸ் (inline regex) பயன்படுத்துதல் உரை பாணிகளைக் (text styles) கையாள regular expressions-ஐப் பயன்படுத்தவும்.
- text என்பதை strong டேக்குகளாக மாற்றவும்.
- text என்பதை anchor டேக்குகளாக மாற்றவும். வரிசை முறை முக்கியமானது. பிழைகளைத் தவிர்க்க, இத்தாலிக்ஸ் (italics) செய்வதற்கு முன் போல்ட் (bold) செய்வதைச் செயலாக்கவும்.
- நேரடித் திரையிடல் (Live render) ஒவ்வொரு முறை கீயை அழுத்தும் போதும் முழு உள்ளடக்கத்தையும் மீண்டும் திரையிடவும் (re-render). Markdown சிறியது மற்றும் விரைவாகப் பகுப்பாய்வு (parse) செய்யக்கூடியது. இது உடனடித் திரைப்பகுப்பு (split-screen) விளைவை உருவாக்குகிறது.
இதன் தர்க்கம் (logic) எளிமையானது: தடுத்தல் (Escape), பாதுகாத்தல் (protect), பிளாக் விதிகள் (block rules), இன்லைன் ரெஜெக்ஸ் (inline regex) மற்றும் திரையிடல் (render).
நேரடி எடிட்டரை இங்கே முயற்சிக்கவும்: 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