Підсвітка синтаксису коду в 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
блок із кодом
```

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

Створення шаблона WordPress. Вигляд категорій

Створення шаблона WordPress. Файл style.css

Як змінити посилання на медіа у WordPress

Створення шаблона WordPress. Файл header.php