Об этом проекте
github-markdown-css — это небольшой CSS-пакет, назначение которого — воспроизводить визуальный стиль, который GitHub применяет к отрендеренному Markdown, используя минимально необходимое количество CSS. Таблица стилей генерируется, а не редактируется вручную; в README авторы направляют вклад в отдельный репозиторий generate-github-markdown-css.
Использование простое: импортируйте github-markdown.css, добавьте класс markdown-body контейнеру с отрендеренным Markdown и задайте ширину. В README указано, что GitHub использует ширину 980px с внутренними отступами 45px и 15px на мобильных устройствах; также приводится пример с box-sizing, min-width, max-width, margin: auto и медиазапросом для узких экранов. Цвет фона для тёмного режима показан через prefers-color-scheme.
Пакет включает семь тем: стандартную, которая автоматически переключается между светлой и тёмной через prefers-color-scheme, только светлую, только тёмную, тёмную приглушённую, тёмную с высокой контрастностью, тёмную для дальтоников (протанопия и дейтеранопия) и светлую для дальтоников.
Для HTML, соответствующего этим стилям, README предлагает API GitHub /markdown, который возвращает HTML, генерируемый самим GitHub. Отмечается, что другие парсеры Markdown в основном тоже будут работать с этими стилями, и рекомендуется starry-night для подсветки кода в стиле GitHub.
Варианты установки включают ручную загрузку файла, использование CDNJS или npm install github-markdown-css. Приведена ссылка на демонстрационную страницу.
В разделе устранения неполадок объясняется, что проблемы со стилями, например чёрный шрифт таблиц в тёмном режиме, могут возникать из-за перехода браузера в режим совместимости (quirks mode); добавление doctype в начало страницы предотвращает это. Для разработки используется npm run make для обновления CSS.
Comments
0 Rating appears after 10 ratings
Sign in to join the discussion.