Phông chữ có tích hợp sẵn tính năng tô sáng cú pháp

 (blog.glyphdrawing.club)
8 điểm bởi GN⁺ 2024-08-15 | 1 bình luận | Chia sẻ qua WhatsApp

Vấn đề

  • Khi tạo website được code thủ công bằng HTML và CSS, việc tô sáng cú pháp rất khó
  • Muốn làm nổi bật bằng màu sắc để các đoạn mã dễ đọc và dễ hiểu hơn
  • Thông thường phải dùng các thư viện tô sáng cú pháp phức tạp như Prism hoặc highlight.js
  • Muốn code thủ công mà không dùng script bên ngoài

Nhúng tính năng tô sáng cú pháp trực tiếp vào phông chữ bằng các tính năng OpenType

  • Chỉnh sửa phông chữ mã nguồn mở Monaspace Krypton để thêm các phiên bản màu của từng ký tự
  • Sử dụng bảng COLR của OpenType và tính năng thay thế theo ngữ cảnh để tìm và thay thế các chuỗi cụ thể
  • Kết quả là hoàn thiện một bộ tô sáng cú pháp đơn giản được tích hợp ngay trong phông chữ

Ưu điểm và nhược điểm

Ưu điểm

  • Cài đặt đơn giản: chỉ cần import phông chữ và bật các tính năng OpenType COLR (màu sắc) và CALT (thay thế theo ngữ cảnh)
  • Không cần JavaScript
  • Không cần chủ đề CSS
  • Nhanh như văn bản thuần
  • Có thể thêm đoạn mã vào thẻ <pre> và <code>
  • Mã nguồn HTML gọn gàng
  • Hoạt động ở mọi nơi hỗ trợ tính năng OpenType, như InDesign
  • Không cần bảo trì hay cập nhật
  • Hoạt động cả trong <textarea> và <input>

Nhược điểm

  • Khi cần chỉnh sửa như đổi bảng màu hoặc thêm hỗ trợ ngôn ngữ, phải sửa chính file phông chữ
  • Chỉ hoạt động ở nơi có hỗ trợ OpenType
  • Việc tìm mẫu bằng thay thế theo ngữ cảnh của OpenType chỉ ở mức cơ bản, không thể so với script dùng biểu thức chính quy

Cách nó thực sự hoạt động

  • Sử dụng bảng COLR của OpenType và tính năng thay thế theo ngữ cảnh
  • Bảng COLR cho phép tạo phông chữ nhiều màu
  • Thay thế theo ngữ cảnh nhận diện các ký tự liền kề để thay thế
  • Ví dụ: tìm từ khóa JavaScript if và thay bằng biến thể có màu

Tổng kết của GN⁺

  • Bài viết này giới thiệu một cách mới để triển khai tô sáng cú pháp khi code website thủ công
  • Bằng cách tận dụng các tính năng OpenType để nhúng tô sáng cú pháp trực tiếp vào phông chữ, có thể tô sáng cú pháp mà không cần JavaScript hay chủ đề CSS
  • Cách này phù hợp với tô sáng cú pháp đơn giản, nhưng có những giới hạn so với các thư viện tô sáng cú pháp phức tạp hơn
  • Các dự án cung cấp chức năng tương tự gồm có Prism, highlight.js, v.v.

Bài viết liên quan

1 bình luận

 
GN⁺ 2024-08-15
Ý kiến Hacker News

  • Một kiểu hack thú vị

    • Có chút nhầm lẫn về việc sử dụng các tính năng OpenType
    • Thiết lập font-feature-settings: "colr", "calt"; không có ý nghĩa
    • Thẻ tính năng colr không tồn tại trong bảng bố cục OpenType
    • Có thể ý định là kích hoạt bảng COLR
    • Tính năng calt được bật mặc định
    • Hoạt động tốt trên Firefox và Chrome nhưng không chạy trên Safari

  • Văn bản gốc vẫn được giữ nguyên

    • Hoạt động bằng userContent.css mà không cần bọc thẻ hay JS
    • Đây là một cách tiếp cận ở một chiều khác

  • Tôi không phải chuyên gia OpenType nên có thể cải thiện logic thay thế

    • Sẵn sàng chia sẻ tệp nguồn đã chỉnh sửa
    • Nếu có ý tưởng hay phản hồi thì hãy liên hệ

  • Kiểu hack này thật kinh khủng nhưng cũng đáng kinh ngạc

    • Lạm dụng tính năng thay thế theo ngữ cảnh của OpenType một cách xuất sắc
    • Cảm ơn vì đã chia sẻ

  • Một kiểu hack tuyệt vời

    • Khoảng 45kB, kích thước tương đương baseline highlight.js
    • Vẫn hoạt động trong môi trường đã tắt JavaScript
    • Đổi lại, khả năng cấu hình lúc chạy và hỗ trợ ngôn ngữ sẽ hẹp hơn

  • Có một thông điệp hay ở cuối trang

    • "Trang này không sử dụng cookie và không liên kết tới các trang bên thứ ba"
    • Tôi thích điểm này

  • Có vẻ có thể tự động hóa bằng code

    • Đây là một phương pháp hữu ích cho các trường hợp sử dụng phổ biến

  • Có lỗi trên các trình duyệt dựa trên Chromium

    • Khi nhập color: blue thì chỉ chữ r được tô nổi bật
    • Sao chép rồi dán lại thì hoạt động đúng
    • Dù vậy vẫn là một tính năng rất ngầu

  • Tính năng này thực sự rất tuyệt

    • Có thể dùng không chỉ cho textarea và trường nhập liệu mà còn cho cả tài liệu HTML lớn
    • Không cần dùng quá nhiều span và thẻ HTML
    • Phần mềm kết xuất phông chữ tăng tốc phần cứng sẽ xử lý mọi thứ
    • Có thể tiết kiệm đáng kể bộ nhớ và CPU

  • Có lẽ cần thứ gì đó hoạt động giống như trình tạo parser

    • Chưa rõ các quy tắc này có mức độ biểu đạt đến đâu

  • Một tính năng thực sự đáng kinh ngạc

    • Mong được thấy nó với phông chữ tốt hơn nữa (ví dụ: Inconsolata hoặc JetBrains Mono)
    • Sẽ rất hữu ích để hiển thị JSON một cách dễ dàng