Font dengan fitur penyorotan sintaks bawaan

Masalah

• Sulit melakukan penyorotan sintaks saat membuat situs web yang dikodekan manual dengan HTML dan CSS
• Ingin menyorot dengan warna agar snippet kode lebih mudah dibaca dan dipahami
• Biasanya harus menggunakan library penyorotan sintaks yang kompleks seperti Prism atau highlight.js
• Ingin menulis kode secara manual tanpa menggunakan skrip eksternal

Menanamkan fitur penyorotan sintaks ke dalam font itu sendiri dengan menggunakan fitur OpenType

• Memodifikasi font open source bernama Monaspace Krypton agar menyertakan versi berwarna dari tiap karakter
• Menggunakan tabel COLR milik OpenType dan fitur substitusi kontekstual untuk mencari dan mengganti string tertentu
• Hasilnya adalah penyorot sintaks sederhana yang tertanam langsung di dalam font

Kelebihan dan kekurangan

Kelebihan

• Instalasi sederhana: cukup impor font lalu aktifkan fitur OpenType COLR (warna) dan CALT (substitusi kontekstual)
• Tidak memerlukan JavaScript
• Tidak memerlukan tema CSS
• Secepat teks biasa
• Bisa menambahkan snippet kode ke tag <pre> dan <code>
• Kode sumber HTML yang bersih
• Berfungsi di mana pun yang mendukung fitur OpenType, seperti InDesign
• Tidak memerlukan pemeliharaan atau pembaruan
• Juga berfungsi di <textarea> dan <input>

Kekurangan

• Jika perlu mengubah palet warna atau menambahkan dukungan bahasa, file font harus dimodifikasi
• Hanya berfungsi di tempat yang mendukung OpenType
• Pencarian pola dengan substitusi kontekstual OpenType bersifat dasar dan tidak sebanding dengan skrip yang menggunakan regular expression

Cara kerjanya secara nyata

• Menggunakan tabel COLR OpenType dan fitur substitusi kontekstual
• Tabel COLR memungkinkan font berwarna
• Substitusi kontekstual mengenali karakter yang berdekatan lalu menggantinya
• Contoh: menemukan keyword JavaScript if lalu menggantinya dengan varian berwarna

Ringkasan GN⁺

• Artikel ini mengajukan cara baru untuk menerapkan penyorotan sintaks saat menulis situs web secara manual
• Dengan memanfaatkan fitur OpenType untuk menanamkan penyorotan sintaks langsung ke dalam font, penyorotan sintaks menjadi mungkin tanpa JavaScript atau tema CSS
• Metode ini cocok untuk penyorotan sintaks sederhana, tetapi memiliki keterbatasan jika dibandingkan dengan library penyorotan sintaks yang lebih kompleks
• Proyek dengan fungsi serupa antara lain Prism dan highlight.js

[GN⁺]

Komentar Hacker News

• Peretasan yang menarik

  • Ada sedikit kebingungan terkait penggunaan fitur OpenType
  • Pengaturan font-feature-settings: "colr", "calt"; tidak memiliki arti
  • Tag fitur colr tidak ada di tabel layout OpenType
  • Mungkin yang dimaksud adalah mengaktifkan tabel COLR
  • Fitur calt aktif secara default
  • Berfungsi baik di Firefox dan Chrome, tetapi tidak di Safari

• Teks asli tetap dipertahankan

  • Berfungsi dengan userContent.css tanpa pembungkusan tag atau JS
  • Ini pendekatan dari dimensi lain

• Saya bukan ahli OpenType, jadi logika substitusinya mungkin bisa diperbaiki

  • Bersedia membagikan file sumber yang sudah diperbaiki
  • Jika ada ide atau masukan, silakan hubungi

• Peretasan ini mengerikan tetapi juga mengagumkan

  • Penyalahgunaan yang sangat cerdas terhadap fitur substitusi kontekstual OpenType
  • Terima kasih sudah membagikannya

• Peretasan yang luar biasa

  • Ukurannya sekitar 45kB, mirip dengan baseline highlight.js
  • Tetap berfungsi di lingkungan dengan JavaScript yang dinonaktifkan
  • Namun kemampuan konfigurasi saat runtime dan dukungan bahasanya menjadi lebih terbatas

• Ada pesan yang bagus di bagian bawah halaman

  • "Situs ini tidak menggunakan cookie dan tidak menaut ke situs pihak ketiga"
  • Saya suka itu

• Sepertinya ini bisa diotomatisasi dengan kode

  • Metode yang berguna untuk kasus penggunaan umum

• Ada bug di browser berbasis Chromium

  • Saat mengetik color: blue, hanya r yang disorot
  • Jika disalin lalu ditempel, hasilnya berfungsi dengan benar
  • Tetap saja ini fitur yang keren

• Ini benar-benar fitur yang keren

  • Bisa digunakan bukan hanya pada textarea dan field input, tetapi juga pada dokumen HTML besar
  • Tidak perlu memakai banyak span dan tag HTML
  • Perangkat lunak rendering font dengan akselerasi perangkat keras menangani semuanya
  • Ini bisa sangat menghemat memori dan CPU

• Sepertinya dibutuhkan sesuatu yang bekerja seperti parser generator

  • Belum jelas seberapa ekspresif aturan-aturannya

• Benar-benar fitur yang menakjubkan

  • Menarik untuk melihatnya dengan typeface yang lebih baik (misalnya Inconsolata atau JetBrains Mono)
  • Ini akan berguna untuk menampilkan JSON dengan mudah