Меню категорій

Підсвітка синтаксису коду в Eleventy

Якщо ти створюєш статичний сайт на базі Eleventy, і тобі треба розміщувати уривки коду у статтях, як це роблю я, то підсвітка коду просто необхідна.
Категорії: Eleventy

Спочатку необхідно встановити плагін для підсвітки синтаксису. Для цього в терміналі, знаходячись у кореневій теці Eleventy, прописуємо наступну команду:

npm install @11ty/eleventy-plugin-syntaxhighlight --save-dev

Після цього відкриваємо файл налаштувань .eleventy.js та в потрібному місці додаємо код:

const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(syntaxHighlight);
};

У файлі шаблону перед закриваючим тегом body вписуємо шлях до CSS-розмітки, наприклад, отак:

<link href="https://unpkg.com/prismjs@1.20.0/themes/prism-okaidia.css" rel="stylesheet">

Тепер можна додавати код за допомогою розмітки Markdown, Nunjucks або Liquid. Зазвичай я використовую розмітку Markdown, ось так:

``` js
блок із кодом
```

Раджу прочитати:

Прокоментувати

На сайті відображається лише твоє ім'я та коментар. Електронна пошта зберігається виключно для зв'язку з тобою за потреби та в жодному разі не передається стороннім особам.

Цей сайт захищений системою reCAPTCHA від Google. Політика конфіденційності та Загальні положення та умови.