ฟอนต์ที่มีฟีเจอร์เน้นไวยากรณ์ในตัว

 (blog.glyphdrawing.club)
8 คะแนน โดย GN⁺ 2024-08-15 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

ปัญหา

  • เวลาสร้างเว็บไซต์ที่เขียนโค้ด HTML และ CSS ด้วยมือ การทำ syntax highlighting ทำได้ยาก
  • อยากเน้นส่วนต่างๆ ด้วยสีเพื่อให้อ่านและเข้าใจโค้ดสั้นๆ ได้ง่าย
  • โดยทั่วไปต้องใช้ไลบรารี syntax highlighting ที่ซับซ้อนอย่าง Prism หรือ highlight.js
  • แต่อยากเขียนแบบแฮนด์โค้ดโดยไม่ใช้สคริปต์ภายนอก

ใส่ฟีเจอร์เน้นไวยากรณ์ไว้ในตัวฟอนต์ด้วยความสามารถของ OpenType

  • ปรับแต่งฟอนต์โอเพนซอร์สชื่อ Monaspace Krypton ให้มีเวอร์ชันสีของอักขระแต่ละตัวรวมอยู่ด้วย
  • ใช้ตาราง COLR ของ OpenType และฟีเจอร์ context substitution เพื่อค้นหาและแทนที่สตริงเฉพาะ
  • ผลลัพธ์คือได้ตัวเน้นไวยากรณ์แบบเรียบง่ายที่ฝังอยู่ในตัวฟอนต์เอง

ข้อดีและข้อเสีย

ข้อดี

  • ติดตั้งง่าย: แค่นำเข้าฟอนต์แล้วเปิดใช้ฟีเจอร์ OpenType COLR (สี) และ CALT (contextual alternates)
  • ไม่ต้องใช้ JavaScript
  • ไม่ต้องมีธีม CSS
  • เร็วพอๆ กับข้อความธรรมดา
  • สามารถใส่โค้ดสั้นๆ ในแท็ก <pre> และ <code> ได้
  • ซอร์สโค้ด HTML สะอาด
  • ใช้งานได้ทุกที่ที่รองรับฟีเจอร์ OpenType เช่น InDesign
  • ไม่ต้องคอยบำรุงรักษาหรืออัปเดต
  • ใช้งานได้ใน <textarea> และ <input> ด้วย

ข้อเสีย

  • หากต้องการปรับเปลี่ยน เช่น เปลี่ยนชุดสีหรือเพิ่มการรองรับภาษา ต้องแก้ไขไฟล์ฟอนต์
  • ใช้งานได้เฉพาะในที่ที่รองรับ OpenType
  • การค้นหาแพตเทิร์นด้วย OpenType context substitution ยังเป็นแบบพื้นฐาน เทียบกับสคริปต์ที่ใช้ regular expression ไม่ได้

วิธีการทำงานจริง

  • ใช้ตาราง COLR ของ OpenType และฟีเจอร์ context substitution
  • ตาราง COLR ทำให้สร้างฟอนต์หลายสีได้
  • context substitution จะรับรู้อักขระข้างเคียงแล้วทำการแทนที่
  • ตัวอย่าง: ค้นหาคีย์เวิร์ด JavaScript if แล้วแทนที่ด้วยรูปแบบสี

สรุปโดย GN⁺

  • บทความนี้นำเสนอวิธีใหม่ในการทำ syntax highlighting สำหรับคนที่เขียนเว็บไซต์ด้วยมือ
  • โดยใช้ความสามารถของ OpenType เพื่อฝังการเน้นไวยากรณ์ไว้ในตัวฟอนต์ ทำให้ไม่ต้องพึ่ง JavaScript หรือธีม CSS ก็ทำ syntax highlighting ได้
  • วิธีนี้เหมาะกับการเน้นไวยากรณ์แบบเรียบง่าย แต่ก็ยังมีข้อจำกัดเมื่อเทียบกับไลบรารี syntax highlighting ที่ซับซ้อนกว่า
  • โปรเจ็กต์ที่ให้ความสามารถคล้ายกันมี เช่น Prism และ highlight.js

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-08-15
ความเห็นบน Hacker News

  • เป็นการแฮ็กที่น่าสนใจ

    • ยังมีความสับสนเล็กน้อยเกี่ยวกับการใช้ฟีเจอร์ของ OpenType
    • การตั้งค่า font-feature-settings: "colr", "calt"; ไม่มีความหมาย
    • แท็กฟีเจอร์ colr ไม่มีอยู่ในตารางเลย์เอาต์ของ OpenType
    • อาจตั้งใจจะเปิดใช้งานตาราง COLR
    • ฟีเจอร์ calt ถูกเปิดใช้งานโดยค่าเริ่มต้นอยู่แล้ว
    • ใช้งานได้ดีใน Firefox และ Chrome แต่ใช้ไม่ได้ใน Safari

  • ข้อความต้นฉบับยังคงอยู่เหมือนเดิม

    • ทำงานได้ผ่าน userContent.css โดยไม่ต้องครอบด้วยแท็กหรือใช้ JS
    • เป็นแนวทางที่ต่างออกไปอีกระดับหนึ่ง

  • ผมไม่ใช่ผู้เชี่ยวชาญด้าน OpenType จึงอาจปรับปรุงตรรกะการแทนที่ได้อีก

    • ยินดีจะแชร์ไฟล์ต้นฉบับที่แก้ไขแล้ว
    • หากมีไอเดียหรือข้อเสนอแนะก็ติดต่อมาได้

  • การแฮ็กนี้ทั้งน่ากลัวและน่าทึ่ง

    • เป็นการนำฟีเจอร์การแทนที่ตามบริบทของ OpenType มาใช้ในทางที่ยอดเยี่ยม
    • ขอบคุณที่แบ่งปัน

  • เป็นการแฮ็กที่ยอดเยี่ยม

    • ขนาดประมาณ 45kB ใกล้เคียงกับ baseline highlight.js
    • ทำงานได้แม้ในสภาพแวดล้อมที่ปิดใช้งาน JavaScript
    • แต่ความสามารถในการปรับแต่งขณะรันและการรองรับภาษาจะจำกัดลง

  • มีข้อความดี ๆ อยู่ที่ด้านล่างของหน้า

    • "ไซต์นี้ไม่ใช้คุกกี้ และไม่มีลิงก์ไปยังเว็บไซต์ของบุคคลที่สาม"
    • ผมชอบจุดนี้

  • ดูเหมือนว่าน่าจะทำให้เป็นอัตโนมัติด้วยโค้ดได้

    • เป็นวิธีที่มีประโยชน์สำหรับกรณีใช้งานทั่วไป

  • มีบั๊กในเบราว์เซอร์ที่ใช้ Chromium

    • เมื่อพิมพ์ color: blue จะมีแค่ r ที่ถูกไฮไลต์
    • ถ้าคัดลอกแล้ววางจะทำงานได้ถูกต้อง
    • ถึงอย่างนั้นก็ยังเป็นฟีเจอร์ที่เจ๋งมาก

  • เป็นฟีเจอร์ที่เจ๋งจริง ๆ

    • ใช้ได้ไม่ใช่แค่กับ textarea และช่องกรอกข้อมูล แต่ยังใช้กับเอกสาร HTML ขนาดใหญ่ได้ด้วย
    • ไม่จำเป็นต้องใช้ span และแท็ก HTML จำนวนมาก
    • ซอฟต์แวร์เรนเดอร์ฟอนต์ที่เร่งด้วยฮาร์ดแวร์จัดการทุกอย่างให้
    • น่าจะประหยัดหน่วยความจำและ CPU ได้มาก

  • น่าจะต้องมีสิ่งที่ทำงานคล้าย parser generator

    • ยังไม่ชัดเจนว่ากฎเหล่านี้แสดงความสามารถได้มากแค่ไหน

  • เป็นฟีเจอร์ที่น่าทึ่งจริง ๆ

    • อยากเห็นมันกับแบบอักษรที่ดีกว่านี้ (เช่น Inconsolata หรือ JetBrains Mono)
    • น่าจะมีประโยชน์สำหรับการแสดง JSON ได้อย่างง่ายดาย