Fonte com destaque de sintaxe embutido

Problema

• Ao criar um site codificado manualmente com HTML e CSS, é difícil fazer destaque de sintaxe
• Quero destacar com cores para que trechos de código sejam fáceis de ler e entender
• Normalmente é preciso usar bibliotecas complexas de destaque de sintaxe, como Prism ou highlight.js
• Quero codificar manualmente sem usar scripts externos

Inserindo o destaque de sintaxe na própria fonte usando recursos do OpenType

• Uma fonte open source chamada Monaspace Krypton foi modificada para incluir versões coloridas de cada caractere
• A tabela COLR do OpenType e o recurso de substituição contextual foram usados para localizar e substituir determinadas strings
• Como resultado, foi concluído um destacador de sintaxe simples embutido na própria fonte

Vantagens e desvantagens

Vantagens

• Instalação simples: basta importar a fonte e ativar os recursos OpenType COLR (cor) e CALT (substituição contextual)
• Não precisa de JavaScript
• Não precisa de tema CSS
• Tão rápido quanto texto puro
• É possível adicionar trechos de código nas tags <pre> e <code>
• Código-fonte HTML limpo
• Funciona em qualquer lugar que ofereça suporte a recursos OpenType, como o InDesign
• Não requer manutenção nem atualizações
• Também funciona em <textarea> e <input>

Desvantagens

• Quando é necessário fazer alterações, como mudar a paleta de cores ou adicionar suporte a linguagens, é preciso modificar o arquivo da fonte
• Só funciona onde há suporte a OpenType
• A busca de padrões usando substituição contextual do OpenType é básica e não pode ser comparada a scripts com expressões regulares

Como isso funciona na prática

• Usa a tabela COLR do OpenType e o recurso de substituição contextual
• A tabela COLR permite fontes multicoloridas
• A substituição contextual reconhece caracteres adjacentes e os substitui
• Exemplo: encontra a palavra-chave JavaScript if e a substitui por uma variação colorida

Resumo do GN⁺

• Este artigo apresenta uma nova forma de implementar destaque de sintaxe ao codificar sites manualmente
• Ao incorporar o destaque de sintaxe na própria fonte com recursos do OpenType, ele se torna possível sem JavaScript nem temas CSS
• Esse método é adequado para destaque de sintaxe simples, mas tem limitações em comparação com bibliotecas mais complexas
• Projetos com recursos semelhantes incluem Prism e highlight.js

[GN⁺]

Comentários do Hacker News

• Hack interessante

  • Há uma certa confusão sobre o uso de recursos do OpenType
  • A configuração font-feature-settings: "colr", "calt"; não faz sentido
  • A tag de recurso colr não existe nas tabelas de layout do OpenType
  • Talvez a intenção fosse ativar a tabela COLR
  • O recurso calt já vem ativado por padrão
  • Funciona bem no Firefox e no Chrome, mas não no Safari

• O texto original é preservado integralmente

  • Funciona com userContent.css, sem wrapping de tags nem JS
  • É uma abordagem em outro nível

• Não sou especialista em OpenType, então talvez seja possível melhorar a lógica de fallback

  • Estou disposto a compartilhar o arquivo-fonte corrigido
  • Se alguém tiver ideias ou feedback, entre em contato

• Esse hack é horrível, mas impressionante

  • Faz um excelente mau uso do recurso de substituição contextual do OpenType
  • Obrigado por compartilhar

• Excelente hack

  • Com cerca de 45 kB, tem tamanho parecido com o baseline do highlight.js
  • Funciona mesmo em ambientes com JavaScript desativado
  • Em tempo de execução, a configurabilidade e o suporte a linguagens ficam mais limitados

• Há uma boa mensagem no fim da página

  • "Este site não usa cookies e não contém links para sites de terceiros"
  • Gostei disso

• Parece algo que daria para automatizar com código

  • É um método útil para casos de uso gerais

• Há um bug em navegadores baseados em Chromium

  • Ao digitar color: blue, só o r fica destacado
  • Ao copiar e colar, funciona corretamente
  • Ainda assim, é um recurso bem legal

• Recurso realmente muito legal

  • Pode ser usado não só em textarea e campos de entrada, mas também em documentos HTML grandes
  • Sem precisar usar muitos spans e tags HTML
  • O software de renderização de fontes com aceleração de hardware cuida de tudo
  • Isso provavelmente pode economizar bastante memória e CPU

• Parece que seria preciso algo que funcione como um gerador de parser

  • Não está claro o quão expressivas são as regras

• Recurso realmente impressionante

  • Estou ansioso para ver isso com uma fonte melhor (por exemplo, Inconsolata ou JetBrains Mono)
  • Deve ser útil para exibir JSON com facilidade