Repolode
Enviar
davatron5000

davatron5000/microlighter

Um realçador de sintaxe para JavaScript sem dependências, que usa a CSS Custom Highlight API em vez de envolver cada token em elementos span.

Ver no GitHubSite
Estrelas
1,055
Forks
33
Issues abertas
22
Último commit
mês passado

O que é?

MicroLighter é um realçador de sintaxe compacto para páginas da web. Ele lê gramáticas TextMate e aplica cores pela CSS Custom Highlight API do navegador, mantendo a marcação dos blocos de código limpa, sem spans envolvendo os tokens. A biblioteca tem cerca de 2 KiB compactada e não possui dependências em tempo de execução.

Inclui 37 linguagens carregadas sob demanda e 10 temas integrados, controlados por propriedades personalizadas de CSS. Pode ser usado por meio da função programática `highlightAll()`, de um script executado automaticamente que responde ao evento `syntax-highlight`, de um link para CDN ou do web component opcional `<micro-lighter>`, que adiciona botões para copiar e números de linha.

O tokenizer usa a RegExp nativa do navegador, em vez de Oniguruma ou WebAssembly. Isso mantém o bundle pequeno, mas reduz a variedade de linguagens e a precisão das gramáticas em comparação com ferramentas maiores, como Shiki.

Recursos principais

  • 01Cerca de 2 KiB compactado, sem dependências em tempo de execução
  • 02Realça código sem inserir elementos span para os tokens no DOM
  • 03Dá suporte a 37 linguagens carregadas sob demanda a partir de gramáticas TextMate
  • 04Inclui 10 temas configurados por meio de propriedades personalizadas de CSS
  • 05Oferece APIs programáticas, automáticas e de web component
  • 06Mantém os blocos de código realçados editáveis como texto simples

Casos de uso

  • Adicionar realce de sintaxe leve a um site de documentação ou blog
  • Realçar código em um web component editável ou em um editor de código no navegador
  • Projetos que querem realce sem uma dependência grande, como Shiki

Início rápido

  1. 1

    Instale o pacote

    npm install microlighter
  2. 2

    Importe um tema e execute o realçador no JavaScript

    import "microlighter/themes/github.css"; import { highlightAll } from "microlighter"; document.body.dataset.syntaxTheme = "github"; await highlightAll();

Antes de usar

  • A cobertura de linguagens e a precisão gramatical são mais limitadas do que em ferramentas maiores, como o Shiki.
  • Usa a API CSS Custom Highlight, então o navegador precisa ser compatível com ela.

Tópicos

#syntax-highlighting#css-highlight-api#textmate-grammar#javascript#web-components#frontend-library#css#css-highlight#css3#syntax

Perguntas frequentes

O que é microlighter?
Um realçador de sintaxe para JavaScript sem dependências, que usa a CSS Custom Highlight API em vez de envolver cada token em elementos span. MicroLighter é um realçador de sintaxe compacto para páginas da web. Ele lê gramáticas TextMate e aplica cores pela CSS Custom Highlight API do navegador, mantendo a marcação dos blocos de código limpa, sem spans envolvendo os tokens. A biblioteca tem cerca de 2 KiB compactada e não possui dependências em tempo de execução.
microlighter é gratuito? Qual é a licença?
microlighter é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
microlighter ainda é mantido?
Atualizado nos últimos 6 meses. O último commit de microlighter foi em 11 de set. de 2026.
Para que posso usar microlighter?
Adicionar realce de sintaxe leve a um site de documentação ou blog Realçar código em um web component editável ou em um editor de código no navegador Projetos que querem realce sem uma dependência grande, como Shiki
Como instalar microlighter?
Instale o pacote: npm install microlighter Importe um tema e execute o realçador no JavaScript: import "microlighter/themes/github.css"; import { highlightAll } from "microlighter"; document.body.dataset.syntaxTheme = "github"; await highlightAll();
Onde consigo microlighter?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/davatron5000/microlighter

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados