thumb

Jekyll має вбудовану підтримку підсвічування синтаксису коду для більш ніж 100 мов. Використовуючи підсвічування в шматочках коду на твоєму GitHub Pages вебсайті ти зробиш код більш читаним. У цій статті я покажу те, як ти можеш інтегрувати Rouge в твою Jekyll установку.

Rouge це інструмент для підсвічування синтаксису коду заснований на чистому Ruby. Він може підсвітити 100 різних мов, і виводити HTML або ANSI 256-кольоровий текст. Його вивідний HTML сумісний з таблицями стилів, призначених для Pygments. Rouge - по дефолту виділяє синтаксис в Jekyll 3 і вище.

Налаштування

З тих пір як GitHub Pages оновили Jekyll до версії 3 ти можеш використовувати Rouge в комбінації з Jekyll розташованому на GitHub Pages нативно. Для того щоб підсвічування синтаксису працювала в Jekyll 2, тобі потрібно вручну включити Rouge підсвічування синтаксису. Щоб це зробити, просто додай наступний рядок в _config.yml файл який розташований в root директорії твого Jekyll веб-сайту, і переконайся в тому, що rouge gem правильно інстальований.

1) Відкрий файл _config.yml і додай наступний рядок:

highlighter: rouge

2) Відкрий термінал і впиши наступну комманду (це не потрібно, якщо ти просто клонував початкову точку з якогось GitHub сховища замість створення нового boilerplate веб-сайту використовуючи jekyll new):

gem install rouge

Тема (кольори)

Rouge сумісний з підсвічуванням синтаксису Pygments, що означає те, що ми можемо використовувати таблиці стилів створені для Pygments. Ти можеш копіювати будь-який з цих файлів і використовувати їх. Попередній перегляд цих тем доступний тут. Але в моєму блозі я використовую тему Son of Obsidian.

Потрiбно просто змінити на нове вміст файлу з таблицею стилів для дефолтной теми підсвічування синтаксису.

Мій Jekyll веб-сайт має _syntax-highlighting.scss файл розташований в _scss директорії. Цей файл містить дефолтну таблицю стилів для підсвічування синтаксису. Якщо твій вебсайт не має цього файлу, той файл який відповідає за підсвічування синтаксису, або зроби наступне:

1) Обери тему, яка тобі подобається по посиланню вище.

2) Копируй CSS файл теми (наприклад monokai.css) в your-blog-root-directory/css/ директорію.

3) Відкрий your-blog-root-directory/css/main.css файл і додай monokai.css тему:

@import url(monokai.css);

Але це ще не все. Все Pygments теми використовують .codehilite як дефолтний клас. Тобто тобі потрібно відкрити для редагування CSS файл теми і замінити всі .codehilite на .highlight клас.

Використання

При написанні Markdown з деяким кодом для Jekyll, ти можеш включити підсвічування синтаксису так:


{% highlight python %}
x = ('a', 1, False)
{% endhighlight %}

Аргумент у highlight тега (python в наведеному вище прикладі) це ідентифікатор мови. Для того, щоб знайти відповідний ідентифікатор для мови, який ти хочеш підсвітити, дивись “short name” на Rouge wiki.

Однак це стає трохи складним, якщо ти постійно перемикаєшся між кодом і текстом.

За замовчуванням Jekyll встановлює параметри для fenced_code_blocks в true що означає те, що ти можеш визначити блок коду за допомогою потрійних зворотних лапок. Просто оберни свій код в потрійні зворотні лапки:

```
Some code.
```

Я рекомендую помістити порожній рядок перед і після блоку коду для того, що б зробити читання коду більш легким.

Крім того, можна передати ім’я мови для того, щоб підсвітити особливості мови:

`​``javascript
Some code.
`​``

Зверни увагу на javascript після першої пари потрійних зворотних лапок. Це ідентифікатор мови. Для того, щоб знайти відповідний ідентифікатор для мови, який ти хочеш підсвітити, дивись “short name” на Rouge wiki.

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

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