thumb

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



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


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


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


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

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


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

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


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

```
Some code.
```

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

```javascript
Some code.
```


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


Arthur Gareginyan

Arthur Gareginyan

Arthur is a designer and full stack software engineer. He is the founder of MyCyberUniverse.com. His personal website can be found at arthurgareginyan.com. Check out his free WordPress plugins at wordpress.org.

Follow Arthur: