నేను ఎటువంటి లైబ్రరీ లేకుండా లైవ్ మార్క్డౌన్ ఎడిటర్ను రూపొందించాను
మార్క్డౌన్ ఎడిటర్ను రూపొందించడానికి మీకు భారీ లైబ్రరీల అవసరం లేదు. నేను సుమారు 40 లైన్ల కోడ్తో పనిచేసే వెర్షన్ను రూపొందించాను. మీరు టైప్ చేస్తున్న కొద్దీ ఇది తక్షణమే HTMLని రెండర్ చేస్తుంది.
ఈ ప్రక్రియ ఐదు నిర్దిష్ట దశలను అనుసరిస్తుంది:
HTML క్యారెక్టర్లను ఎస్కేప్ (Escape) చేయండి మొదట < మరియు > వంటి చిహ్నాలను మార్చాలి. ఇది స్క్రిప్ట్ ట్యాగ్ల నుండి XSS దాడులను నివారిస్తుంది. మీరు దీనిని వదిలేస్తే, మీ ఎడిటర్ సురక్షితం కాదు.
కోడ్ బ్లాక్లను రక్షించండి కోడ్ బ్లాక్లను వేరు చేసి వాటిని ప్లేస్హోల్డర్లతో (placeholders) భర్తీ చేయండి. దీనివల్ల మీ ఫార్మాటింగ్ నియమాలు శాంపిల్ లోపల ఉన్న కోడ్ను దెబ్బతీయకుండా ఉంటాయి.
బ్లాక్ నియమాలను ప్రాసెస్ చేయండి టెక్స్ట్ యొక్క ప్రతి లైన్ను పరిశీలించండి.
- h1 ట్యాగ్లను సృష్టించడానికి # ఉపయోగించండి.
- లిస్ట్ ఐటెమ్లను సృష్టించడానికి - ఉపయోగించండి.
- కోట్స్ (quotes) సృష్టించడానికి > ఉపయోగించండి.
లిస్ట్ లైన్లను ఒకే
ulట్యాగ్లోకి సమూహపరచండి.
- ఇన్లైన్ రెగెక్స్ (inline regex) వర్తింపజేయండి టెక్స్ట్ స్టైల్స్ను నిర్వహించడానికి రెగ్యులర్ ఎక్స్ప్రెషన్స్ను ఉపయోగించండి.
- text ను strong ట్యాగ్లుగా మార్చండి.
- text ను యాంకర్ (anchor) ట్యాగ్లుగా మార్చండి. క్రమం ముఖ్యం. లోపాలను నివారించడానికి ఇటాలిక్స్కు ముందే బోల్డ్ను ప్రాసెస్ చేయండి.
- లైవ్ రెండర్ ప్రతి కీస్ట్రోక్ (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