Una fuente con resaltado de sintaxis integrado

Problema

• Al crear un sitio web codificado a mano con HTML y CSS, es difícil aplicar resaltado de sintaxis
• Se quiere resaltar con colores para que los fragmentos de código sean fáciles de leer y entender
• Normalmente hay que usar bibliotecas complejas de resaltado de sintaxis como Prism o highlight.js
• Se quiere codificar a mano sin usar scripts externos

Integrar la función de resaltado de sintaxis en la propia fuente usando características de OpenType

• Se modificó una fuente de código abierto llamada Monaspace Krypton para incluir versiones coloreadas de cada carácter
• Se usan la tabla COLR de OpenType y la función de sustitución contextual para encontrar y reemplazar cadenas específicas
• Como resultado, se completó un resaltador de sintaxis simple integrado en la propia fuente

Ventajas y desventajas

Ventajas

• Instalación simple: basta con importar la fuente y activar las funciones OpenType COLR (color) y CALT (sustitución contextual)
• No se necesita JavaScript
• No se necesita un tema CSS
• Es tan rápido como el texto plano
• Se pueden agregar fragmentos de código en las etiquetas <pre> y <code>
• Código fuente HTML limpio
• Funciona en cualquier lugar que admita funciones OpenType, como InDesign
• No requiere mantenimiento ni actualizaciones
• También funciona en <textarea> e <input>

Desventajas

• Si hace falta cambiar la paleta de colores o añadir soporte para otros lenguajes, hay que modificar el archivo de fuente
• Solo funciona donde haya soporte para OpenType
• La búsqueda de patrones con sustitución contextual de OpenType es básica y no se puede comparar con scripts que usan expresiones regulares

Cómo funciona realmente

• Usa la tabla COLR de OpenType y la función de sustitución contextual
• La tabla COLR permite fuentes multicolor
• La sustitución contextual reconoce caracteres adyacentes y los reemplaza
• Ejemplo: encuentra la palabra clave de JavaScript if y la sustituye por una variante coloreada

Resumen de GN⁺

• Este artículo propone una nueva forma de implementar resaltado de sintaxis al codificar sitios web a mano
• Al aprovechar funciones de OpenType para integrar el resaltado de sintaxis en la propia fuente, se hace posible resaltar sintaxis sin JavaScript ni temas CSS
• Este método es adecuado para un resaltado de sintaxis simple, pero tiene limitaciones frente a bibliotecas más complejas
• Entre los proyectos que ofrecen funciones similares están Prism y highlight.js

[GN⁺]

Comentarios de Hacker News

• Es un hack interesante

  • Hay algo de confusión sobre el uso de funciones de OpenType
  • La configuración font-feature-settings: "colr", "calt"; no significa nada
  • La etiqueta de función colr no existe en las tablas de layout de OpenType
  • Es posible que la intención haya sido activar la tabla COLR
  • La función calt está activada por defecto
  • Funciona bien en Firefox y Chrome, pero no en Safari

• El texto original se conserva tal cual

  • Funciona con userContent.css sin envolver etiquetas ni usar JS
  • Es un enfoque de otro nivel

• No soy experto en OpenType, así que podría mejorar la lógica de reemplazo

  • Estoy dispuesto a compartir el archivo fuente corregido
  • Si tienen ideas o comentarios, contáctenme

• Este hack es terrible, pero asombroso

  • Abusa de manera excelente de la función de sustitución contextual de OpenType
  • Gracias por compartirlo

• Es un gran hack

  • Con unos 45 kB, tiene un tamaño parecido al de highlight.js baseline
  • Funciona incluso en entornos donde JavaScript está desactivado
  • A cambio, se reducen la configurabilidad en tiempo de ejecución y el soporte de lenguajes

• Hay un buen mensaje al final de la página

  • "Este sitio no usa cookies ni enlaza a sitios de terceros"
  • Eso me gustó

• Parece que se podría automatizar con código

  • Es un método útil para casos de uso generales

• Hay un bug en navegadores basados en Chromium

  • Si escribes color: blue, solo se resalta la r
  • Si copias y pegas, funciona correctamente
  • Aun así, es una función genial

• Es una función realmente genial

  • Puede usarse no solo en textarea y campos de entrada, sino también en documentos HTML grandes
  • No hace falta usar muchos span ni etiquetas HTML
  • El software de renderizado de fuentes con aceleración por hardware se encarga de todo
  • Podría ahorrar mucha memoria y CPU

• Parece que haría falta algo que funcione como un generador de analizadores sintácticos

  • No está claro qué tan expresivas son las reglas

• Es una función realmente asombrosa

  • Tengo ganas de verla con una tipografía mejor (por ejemplo, Inconsolata o JetBrains Mono)
  • Sería útil para mostrar JSON fácilmente