Как добавить подсветку синтаксиса на свой сайт

Если у вас есть блог по программированию как у меня или ваш веб-сайт содержит примеры кода и пояснительный контент, вы можете захотеть поддерживать подсветку синтаксиса на своих страницах. Существует множество доступных решений и обходных путей, но наиболее гибким, на мой взгляд, является использование 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/

Развлекайся. Ваше здоровье! 🍻