MicroLighter: realce de sintaxe leve direto no navegador
O que é o MicroLighter
Dave Rupert criou o MicroLighter, um realçador de sintaxe executado no navegador, sem dependências e com cerca de 2 KB após minificação e compactação. A ferramenta usa a CSS Custom Highlights API, aplicando ::highlight(token-name) aos trechos identificados em vez de inserir elementos <span> no DOM. Ela também aproveita as gramáticas de linguagem do TextMate, carrega cada linguagem sob demanda e oferece temas legíveis baseados em light-dark().
O projeto surgiu depois que o realce de sintaxe que Rupert usava em seu blog Jekyll parou de funcionar. Após experimentar soluções como Highlight.js, PrismJS, Rouge e Shiki, ele decidiu explorar a técnica de Bramus baseada na CSS Custom Highlights API. Como o site tem poucos blocos de código e exemplos curtos, a prioridade era manter a biblioteca pequena, mas sem limitar o autor a uma única linguagem: as publicações podem misturar HTML, CSS, JavaScript, Bash, Ruby e Markdown.
Escolhas técnicas e limitações
A API permite expressar diretamente, em CSS, que determinado intervalo de texto deve ser realçado e evita mutações no DOM. O núcleo do MicroLighter, portanto, se concentra em examinar os blocos de código com padrões de expressão regular e registrar os intervalos encontrados por meio de CSS.highlights.set(category, textRanges). A abordagem tem limitações: o pseudo-elemento ::highlight() não oferece itálico, negrito nem troca de fonte.
Para lidar com a variedade de linguagens, o projeto adotou as coleções de padrões do TextMate, usadas também pelo VS Code. Rupert simplificou as categorias detalhadas de tokens do TextMate, inspirado nas categorias reduzidas do PrismJS, para tornar a estilização mais compreensível. As gramáticas são carregadas apenas quando necessárias, reduzindo a configuração inicial e o tamanho do pacote - o usuário só baixa o que utiliza.
Os temas claro e escuro também foram reunidos em uma única definição com light-dark(). O sistema organiza as cores em tokens semânticos, como comentário, palavra-chave, operador, string, função, tipo, variável, propriedade e seletor, permitindo usar temas fornecidos ou criar outros próprios.
Uso e separação de responsabilidades
O autor restringiu o realçador à tarefa de inferir a linguagem e destacar o código. Recursos adicionais, como numeração de linhas, controles e cópia, foram deslocados para o elemento personalizado <micro-lighter>. O componente web acrescenta cerca de 1 KB, mas mantém a interface separada do núcleo; o encapsulamento por Shadow DOM também isola a implementação da apresentação.
O pacote pode ser instalado pelo npm e incluído por um arquivo JavaScript auto-inicializável, por ESM ou pelo componente web. Como nem todas as páginas precisam de realce, o script pode ser importado dinamicamente apenas quando houver um bloco pre > code. A versão ESM permite chamar highlightAll com um seletor específico, enquanto as classes do componente podem ser estendidas para acrescentar recursos não oferecidos pela implementação original. Rupert encerra apresentando o MicroLighter e convidando quem o experimentar a enviar opiniões.