Как добавить подсветку синтаксиса на свой сайт
Если у вас есть блог по программированию как у меня или ваш веб-сайт содержит примеры кода и пояснительный контент, вы можете захотеть поддерживать подсветку синтаксиса на своих страницах. Существует множество доступных решений и обходных путей, но наиболее гибким, на мой взгляд, является использование Chroma.
Что такое Chroma
Chroma — это библиотека с открытым исходным кодом, написанная на Go и позволяющая подсвечивать синтаксис для разных языков. Chroma основана на Pygments, универсальной подсветке синтаксиса, написанной на Python.
github.com/alecthomas/chroma
pygments.org
Цветовой интерфейс командной строки
Хотя вы можете писать сценарии Go для использования Chroma на своем веб-сайте, более простой способ — использовать Chroma CLI. Чтобы его установить, сначала нужно установить Go.
golang.org/dl/
Если вы пользователь Linux, вы можете использовать apt
(Операционные системы на базе Debian) или brew
для его установки:
🚀 ~ sudo apt install golang
🚀 ~ brew install go
Затем проверьте установку, запустив go version
в терминале.
Важно! Chroma зависит от пакета Go под названием bits
, который был представлен в go1.9, поэтому убедитесь, что у вас есть go >= 1.9
.
Чтобы установить Chroma CLI, запустите:
🚀 ~ go get -u -v github.com/alecthomas/chroma/cmd/chroma
Затем, чтобы сделать его доступным по всему миру:
🚀 ~ sudo cp ./bin/chroma /usr/bin
или
🚀 ~ sudo cp ~/go/ bin/chroma /usr/bin
# Если $GOPATH не указан
Запустите chroma --version
, чтобы проверить установку.
Как пользоваться
Chroma основана на концепциях лексеров, форматировщиков и стилей. Лексеры, вообще говоря, отвечают за лексический анализ ввода и понимание того, на каком языке он используется. Форматеры выполняют необходимые операции для структурирования вывода в заданном формате. А стили задают внешний вид вывода.
Проще говоря, лексеры определяют тип ввода, средства форматирования определяют тип вывода, а стили оформляют вывод.
Чтобы увидеть список доступных лексеров, форматтеров и стилей, мы запускаем:
🚀 ~ цветность --list
Допустим, мы хотим выделить синтаксис кода JavaScript ниже, используя цветовую схему monokai
.
// greeting.js
let fullname = 'John Doe';
const greeting = `Hello, ${fullname}`;
console.log(greeting);
🚀 ~ chroma --lexer js --formatter html --style monokai --html-inline-styles --html-only Greeting.js › output.html
Здесь флаг --html-inline-styles
говорит Chroma использовать встроенные стили вместо имен классов, а флаг --html-only
опускает HTML-теги по умолчанию: <html>
и <body>
.
Chroma умен и может автоматически определять лексер. В большинстве случаев вам не нужно указывать это явно.
🚀 ~ chroma --html --style monokai --html-inline-styles --html-only Greeting.js › output.html
Теперь вам просто нужно скопировать содержимое output.html
в свой код. 🙂
Гибкость
Будучи невероятно полезным, Chroma также очень гибок. Вы можете создать отдельный файл CSS и объединить его со стилями вашего сайта.
🚀 ~ chroma --html --style monokai --html-styles Greeting.js › output.css
🚀 ~ chroma --html --style monokai --html-only Greeting.js › output.html
Сгенерированные выше output.html
и output.css
будут использовать соответствующие имена классов.
Чтобы избежать конфликтов между именами классов, сгенерированными Chroma, и именами классов, используемыми на вашем веб-сайте, вы можете использовать префиксы, например:
🚀 ~ chroma --html --style monokai --html-prefix c5h1_ Greeting.js › output.html
Важно! В текущей версии Chroma (0.8.2) есть ошибка при одновременном использовании флагов --html-styles
и --html-prefix
. Если вы хотите иметь автономный CSS с именами классов с префиксом, вам нужно вручную скопировать стили из output.html
.
Кстати, у Chroma есть онлайн-площадка, где можно визуально протестировать разные цветовые схемы.
swapoff.org/chroma/playground/
Развлекайся. Ваше здоровье! 🍻