Заміна виделітелей 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.

Якщо ця стаття допомогла вам, будь ласка, залиште коментар

Дякую за прочитання!