ผมสร้าง Live Markdown Editor โดยไม่ใช้ Library เลย
คุณไม่จำเป็นต้องใช้ Library หนักๆ เพื่อสร้าง Markdown editor ผมสร้างเวอร์ชันที่ใช้งานได้จริงด้วยโค้ดเพียงประมาณ 40 บรรทัด โดยมันจะเรนเดอร์ HTML ให้ทันทีในขณะที่คุณพิมพ์
กระบวนการนี้ประกอบด้วย 5 ขั้นตอนเฉพาะดังนี้:
Escape ตัวอักษร HTML คุณต้องแทนที่สัญลักษณ์อย่าง < และ > เป็นอันดับแรก เพื่อป้องกันการโจมตีแบบ XSS จาก script tags หากคุณข้ามขั้นตอนนี้ Editor ของคุณจะไม่ปลอดภัย
ปกป้อง Code Blocks ดึง Code blocks ออกมาและแทนที่ด้วย placeholder เพื่อให้แน่ใจว่ากฎการจัดรูปแบบของคุณจะไม่ไปทำลายโค้ดที่อยู่ในตัวอย่าง
ประมวลผลกฎของ Block ไล่ตรวจสอบข้อความทีละบรรทัด
- ใช้ # เพื่อสร้าง h1 tags
- ใช้ - เพื่อสร้าง list items
- ใช้ > เพื่อสร้าง quotes รวมบรรทัดที่เป็นรายการเข้าด้วยกันใน tag ul เดียวกัน
- ใช้ Inline Regex ใช้ Regular Expressions ในการจัดการรูปแบบข้อความ
- เปลี่ยน text เป็น strong tags
- เปลี่ยน text เป็น anchor tags ลำดับมีความสำคัญ ควรประมวลผลตัวหนาก่อนตัวเอียงเพื่อหลีกเลี่ยงข้อผิดพลาด
- Live Render เรนเดอร์เนื้อหาทั้งหมดใหม่ในทุกๆ การกดปุ่ม เนื่องจาก Markdown มีขนาดเล็กและประมวลผล (parse) ได้รวดเร็ว จึงทำให้เกิดเอฟเฟกต์หน้าจอแยก (split-screen) แบบทันทีทันใด
ตรรกะนั้นง่ายมาก: Escape, ปกป้อง, กฎของ block, inline regex และเรนเดอร์
ลองใช้ live editor ได้ที่นี่: 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