Repolode
Предложить
davatron5000

davatron5000/microlighter

Лёгкая подсветка синтаксиса на JavaScript без зависимостей: использует CSS Custom Highlight API и не оборачивает токены в элементы span.

Открыть на GitHubСайт
Звёзды
1,055
Форки
33
Открытые issues
22
Последний коммит
в прошлом месяце

Что это?

MicroLighter — небольшая библиотека для подсветки синтаксиса на веб-страницах. Она читает грамматики TextMate и применяет цвета через CSS Custom Highlight API браузера, поэтому разметка блоков кода остаётся чистой: внутри нет элементов span для токенов. Библиотека занимает около 2 КиБ в сжатом виде и не имеет зависимостей во время выполнения.

В библиотеку входят 37 языков, загружаемых по мере необходимости, и 10 встроенных тем, настройки которых задаются через пользовательские свойства CSS. Её можно использовать через программную функцию `highlightAll()`, автоматически запускаемый скрипт, реагирующий на событие `syntax-highlight`, ссылку на CDN или необязательный веб-компонент `<micro-lighter>`, который добавляет кнопки копирования и нумерацию строк.

Токенизатор использует встроенный в браузер RegExp, а не Oniguruma или WebAssembly. Это позволяет сохранить небольшой размер сборки, но обеспечивает меньший охват языков и точность грамматик по сравнению с более крупными инструментами, такими как Shiki.

Ключевые возможности

  • 01Около 2 КиБ в сжатом виде, без зависимостей во время выполнения
  • 02Подсвечивает код, не добавляя в DOM элементы span для токенов
  • 03Поддерживает 37 языков, загружаемых по мере необходимости из грамматик TextMate
  • 04Включает 10 тем, настраиваемых через пользовательские свойства CSS
  • 05Предоставляет программный API, автоматический режим и API веб-компонента
  • 06Оставляет подсвеченные блоки кода доступными для редактирования как обычный текст

Сценарии использования

  • Добавление лёгкой подсветки синтаксиса на сайт документации или в блог
  • Подсветка кода в редактируемом веб-компоненте или браузерном редакторе кода
  • Проекты, которым нужна подсветка без тяжёлой зависимости вроде Shiki

Быстрый старт

  1. 1

    Установите пакет

    npm install microlighter
  2. 2

    Импортируйте тему и запустите подсветчик в JavaScript

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

Что важно знать

  • Поддержка языков и точность грамматики более ограничены, чем у более крупных инструментов, таких как Shiki.
  • Используется API CSS Custom Highlight, поэтому браузер должен его поддерживать.

Темы

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

Частые вопросы

Что такое microlighter?
Лёгкая подсветка синтаксиса на JavaScript без зависимостей: использует CSS Custom Highlight API и не оборачивает токены в элементы span. MicroLighter — небольшая библиотека для подсветки синтаксиса на веб-страницах. Она читает грамматики TextMate и применяет цвета через CSS Custom Highlight API браузера, поэтому разметка блоков кода остаётся чистой: внутри нет элементов span для токенов. Библиотека занимает около 2 КиБ в сжатом виде и не имеет зависимостей во время выполнения.
microlighter можно использовать бесплатно? Какая у него лицензия?
microlighter распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
microlighter всё ещё поддерживается?
Обновлялся за последние 6 месяцев. Последний коммит в microlighter — 11 сент. 2026 г..
Для чего можно использовать microlighter?
Добавление лёгкой подсветки синтаксиса на сайт документации или в блог Подсветка кода в редактируемом веб-компоненте или браузерном редакторе кода Проекты, которым нужна подсветка без тяжёлой зависимости вроде Shiki
Как установить microlighter?
Установите пакет: npm install microlighter Импортируйте тему и запустите подсветчик в JavaScript: import "microlighter/themes/github.css"; import { highlightAll } from "microlighter"; document.body.dataset.syntaxTheme = "github"; await highlightAll();
Где скачать microlighter?
Исходный код и инструкции по установке — на GitHub: https://github.com/davatron5000/microlighter

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты