ਮੈਂ ਬਿਨਾਂ ਕਿਸੇ ਲਾਇਬ੍ਰੇਰੀ ਦੇ ਇੱਕ ਲਾਈਵ Markdown ਐਡੀਟਰ ਬਣਾਇਆ ਹੈ
ਤੁਹਾਨੂੰ Markdown ਐਡੀਟਰ ਬਣਾਉਣ ਲਈ ਭਾਰੀ ਲਾਇਬ੍ਰੇਰੀਆਂ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। ਮੈਂ ਲਗਭਗ 40 ਲਾਈਨਾਂ ਦੇ ਕੋਡ ਵਿੱਚ ਇੱਕ ਕੰਮ ਕਰਦਾ ਹੋਇਆ ਵਰਜ਼ਨ ਬਣਾਇਆ ਹੈ। ਇਹ ਟਾਈਪ ਕਰਦੇ ਸਮੇਂ ਤੁਰੰਤ HTML ਰੈਂਡਰ ਕਰਦਾ ਹੈ।
ਇਹ ਪ੍ਰਕਿਰਿਆ ਪੰਜ ਖਾਸ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰਦੀ ਹੈ:
HTML ਅੱਖਰਾਂ ਨੂੰ ਐਸਕੇਪ (Escape) ਕਰੋ ਤੁਹਾਨੂੰ ਪਹਿਲਾਂ < ਅਤੇ > ਵਰਗੇ ਚਿੰਨ੍ਹਾਂ ਨੂੰ ਬਦਲਣਾ ਚਾਹੀਦਾ ਹੈ। ਇਹ ਸਕ੍ਰਿਪਟ ਟੈਗਾਂ ਤੋਂ XSS ਹਮਲਿਆਂ ਨੂੰ ਰੋਕਦਾ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਇਸ ਨੂੰ ਛੱਡ ਦਿੰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਡਾ ਐਡੀਟਰ ਅਸੁਰੱਖਿਅਤ ਹੈ।
ਕੋਡ ਬਲਾਕਸ (code blocks) ਦੀ ਰੱਖਿਆ ਕਰੋ ਕੋਡ ਬਲਾਕਸ ਨੂੰ ਕੱਢੋ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਪਲੇਸਹੋਲਡਰਾਂ (placeholders) ਨਾਲ ਬਦਲ ਦਿਓ। ਇਹ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ ਕਿ ਤੁਹਾਡੇ ਫਾਰਮੈਟਿੰਗ ਨਿਯਮ ਕਿਸੇ ਸੈਂਪਲ ਦੇ ਅੰਦਰਲੇ ਕੋਡ ਨੂੰ ਖਰਾਬ ਨਾ ਕਰਨ।
ਬਲਾਕ ਨਿਯਮਾਂ (block rules) ਨੂੰ ਪ੍ਰੋਸੈਸ ਕਰੋ ਟੈਕਸਟ ਦੀ ਹਰ ਲਾਈਨ ਦੀ ਜਾਂਚ ਕਰੋ।
- h1 ਟੈਗ ਬਣਾਉਣ ਲਈ # ਦੀ ਵਰਤੋਂ ਕਰੋ।
- ਲਿਸਟ ਆਈਟਮਾਂ ਬਣਾਉਣ ਲਈ - ਦੀ ਵਰਤੋਂ ਕਰੋ।
- ਕੋਟਸ (quotes) ਬਣਾਉਣ ਲਈ > ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਲਿਸਟ ਦੀਆਂ ਲਾਈਨਾਂ ਨੂੰ ਇੱਕ ਸਿੰਗਲ
<ul>ਟੈਗ ਵਿੱਚ ਸਮੂਹਬੱਧ ਕਰੋ।
- ਇਨਲਾਈਨ ਰੈਗੈਕਸ (inline regex) ਲਾਗੂ ਕਰੋ ਟੈਕਸਟ ਸਟਾਈਲ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਰੈਗੂਲਰ ਐਕਸਪ੍ਰੈਸ਼ਨ (regular expressions) ਦੀ ਵਰਤੋਂ ਕਰੋ।
- text ਨੂੰ strong ਟੈਗਾਂ ਵਿੱਚ ਬਦਲੋ।
- text ਨੂੰ ਐਂਕਰ (anchor) ਟੈਗਾਂ ਵਿੱਚ ਬਦਲੋ। ਕ੍ਰਮ (order) ਮਹੱਤਵਪੂਰਨ ਹੈ। ਗਲਤੀਆਂ ਤੋਂ ਬਚਣ ਲਈ ਇਟੈਲਿਕਸ (italics) ਤੋਂ ਪਹਿਲਾਂ ਬੋਲਡ (bold) ਨੂੰ ਪ੍ਰੋਸੈਸ ਕਰੋ।
- ਲਾਈਵ ਰੈਂਡਰ ਹਰ ਕੀਸਟ੍ਰੋਕ (keystroke) 'ਤੇ ਪੂਰੇ ਕੰਟੈਂਟ ਨੂੰ ਦੁਬਾਰਾ ਰੈਂਡਰ ਕਰੋ। Markdown ਪਾਰਸ ਕਰਨ ਵਿੱਚ ਛੋਟਾ ਅਤੇ ਤੇਜ਼ ਹੁੰਦਾ ਹੈ। ਇਹ ਤੁਰੰਤ ਸਪਲਿਟ-ਸਕ੍ਰੀਨ ਪ੍ਰਭਾਵ ਪੈਦਾ ਕਰਦਾ ਹੈ।
ਤਰਕ (logic) ਸਰਲ ਹੈ: ਐਸਕੇਪ, ਪ੍ਰੋਟੈਕਟ, ਬਲਾਕ ਨਿਯਮ, ਇਨਲਾਈਨ ਰੈਗੈਕਸ, ਅਤੇ ਰੈਂਡਰ।
ਲਾਈਵ ਐਡੀਟਰ ਇੱਥੇ ਅਜ਼ਮਾਓ: 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