Замена выделителя Rouge на Prism.js в Jekyll

По умолчанию Jekyll 3 имеет встроенный выделитель синтаксиса Rouge. Но по некоторым причинам ты можешь захотеть поменять его на выделитель синтаксиса Prism.js. Prism.js это очень лёгкая JavaScript библиотека для обеспечения выделения кода на веб-сайтах. В этой статье Я покажу тебе то, как настроить его на Jekyll веб-сайте.

Начнём

Процесс замены подсветки выделителя Rouge на Prism.js в Jekyll - это действительно простой процесс. Теперь пошаговое руководство.

Во-первых, нам нужно отключить выделитель синтаксиса Rouge, который является выделителем синтаксиса в Jekyll (версии 3) по-умолчанию. Чтобы сделать это, прочитай другую мою статью здесь.

Prism.js состоит из двух частей, JavaScript файл и CSS файл с цветовой схемой для него. Эти файлы можно скачать с сайта проекта. Там, инструмент конфигурации позволяет выбрать языки, которые ты хочешь включить, затем ты получишь prism.js и prism.css файлы с поддержкой только нужных тебе языков.

Перемести оба загруженных файла в соответствующие каталоги, которые расположены в root твоего веб-сайта Jekyll. prism.js файл в js каталог и prism.css файл в css каталог.

Включи prism.css в файл head.html, чуть выше тега </head>:

<link rel="stylesheet" href="{{ "/css/prism.css" | prepend: site.baseurl }}">

Включи prism.js в файл footer.html, чуть выше тега </footer>:

<script src="{{ "/js/prism.js" | prepend: site.baseurl }}"></script>

Последняя часть это использование выделителя синтаксиса Prism.js в одном из твоих постов. Допустим, ты пишешь новый пост (используя markdown) с кодом. Просто оберни код в обратные тройные кавычки:

```
Some code.
```

Дополненительно ты можешь указать язык для того, чтобы обеспечить выделение особенностей определённого языка:

```javascript
Some code.
```

Поздравляю! Теперь у тебя установлен выделитель синтаксиса Prism.js.

Если эта статья помогла вам, пожалуйста, оставьте комментарий

Спасибо за прочтение!