ഒരു ലൈബ്രറിയും ഉപയോഗിക്കാതെ ഞാൻ ഒരു ലൈവ് മാർക്ക്ഡൗൺ എഡിറ്റർ നിർമ്മിച്ചു
ഒരു മാർക്ക്ഡൗൺ എഡിറ്റർ നിർമ്മിക്കാൻ നിങ്ങൾക്ക് വലിയ ലൈബ്രറികൾ ആവശ്യമില്ല. ഏകദേശം 40 വരി കോഡിൽ ഞാൻ ഇതിന്റെ ഒരു വർക്കിംഗ് വേർഷൻ നിർമ്മിച്ചു. നിങ്ങൾ ടൈപ്പ് ചെയ്യുമ്പോൾ തന്നെ ഇത് ഉടൻ തന്നെ HTML ആയി റെൻഡർ ചെയ്യുന്നു.
ഈ പ്രക്രിയ അഞ്ച് ഘട്ടങ്ങളിലൂടെയാണ് നടക്കുന്നത്:
HTML ക്യാരക്ടറുകൾ എസ്കേപ്പ് ചെയ്യുക (Escape HTML characters) ആദ്യം <, > തുടങ്ങിയ ചിഹ്നങ്ങൾ മാറ്റണം. ഇത് സ്ക്രിപ്റ്റ് ടാഗുകളിൽ നിന്നുള്ള XSS ആക്രമണങ്ങളെ തടയുന്നു. നിങ്ങൾ ഇത് ഒഴിവാക്കിയാൽ, നിങ്ങളുടെ എഡിറ്റർ സുരക്ഷിതമായിരിക്കില്ല.
കോഡ് ബ്ലോക്കുകൾ സംരക്ഷിക്കുക (Protect code blocks) കോഡ് ബ്ലോക്കുകൾ വേർതിരിച്ചെടുക്കുകയും അവയ്ക്ക് പകരം പ്ലേസ്ഹോൾഡറുകൾ (placeholders) ഉപയോഗിക്കുകയും ചെയ്യുക. ഇത് നിങ്ങളുടെ ഫോർമാറ്റിംഗ് നിയമങ്ങൾ കോഡിനെ ബാധിക്കില്ലെന്ന് ഉറപ്പാക്കുന്നു.
ബ്ലോക്ക് നിയമങ്ങൾ പ്രോസസ്സ് ചെയ്യുക (Process block rules) ടെക്സ്റ്റിലെ ഓരോ വരിയും പരിശോധിക്കുക.
- h1 ടാഗുകൾ നിർമ്മിക്കാൻ # ഉപയോഗിക്കുക.
- ലിസ്റ്റ് ഐറ്റങ്ങൾ നിർമ്മിക്കാൻ - ഉപയോഗിക്കുക.
- ഉദ്ധരണികൾ (quotes) നിർമ്മിക്കാൻ > ഉപയോഗിക്കുക.
ലിസ്റ്റ് വരികളെ ഒരു സിംഗിൾ
<ul>ടാഗിലേക്ക് ഗ്രൂപ്പ് ചെയ്യുക.
- ഇൻലൈൻ റെഗുലർ എക്സ്പ്രഷൻ (inline regex) പ്രയോഗിക്കുക ടെക്സ്റ്റ് സ്റ്റൈലുകൾ കൈകാര്യം ചെയ്യാൻ റെഗുലർ എക്സ്പ്രഷനുകൾ ഉപയോഗിക്കുക.
- text എന്നത് strong ടാഗുകളാക്കി മാറ്റുക.
- text എന്നത് ആങ്കർ (anchor) ടാഗുകളാക്കി മാറ്റുക. ഇവിടെ ക്രമം പ്രധാനമാണ്. പിശകുകൾ ഒഴിവാക്കാൻ ഇറ്റാലിക്സിനും (italics) മുൻപ് ബോൾഡ് (bold) പ്രോസസ്സ് ചെയ്യുക.
- ലൈവ് റെൻഡർ (Live render) ഓരോ കീസ്ട്രോക്കിലും മുഴുവൻ ഉള്ളടക്കവും വീണ്ടും റെൻഡർ ചെയ്യുക. മാർക്ക്ഡൗൺ വളരെ ചെറുതും വേഗത്തിൽ പാഴ്സ് (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