Добавляем подсветку кода (синтаксиса) в статический блог на Next.js

Продолжаю работать над улучшением блога. В этой статье расскажу как я добавлял подсветку кода (синтаксиса) в постах.

Есть множество способов сделать это, я же решил пойти самым простым путём и остановился на использовании пакета Prism.

Процесс можно разделить на несколько этапов:

• Установка необходимых пакетов
• Статическая генерация подсвеченного кода
• Добавление подсветки необходимых языков
• Работа с плагинами Prism
• Подключение темы Prism

Установка необходимых пакетов

Сначала установим необходимые пакеты:

npm i prismjs

Так как я статически генерирую html блога из .md файлов, то мне нужен способ запускать Prism во время сборки приложения. В этом мне поможет пакет rehype-prism.

npm i rehype-prism

Статическая генерация подсвеченного кода

В подробностях тут описывать особенно нечего, просто импортируем необходимые пакеты и включаем их в процесс генерации html.

import "prismjs";
import rehypePrism from "rehype-prism";
import rehypeStringify from "rehype-stringify";
import remarkCustomHeaderId from "remark-custom-header-id";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import { unified } from "unified";

export default async function markdownToHtml(markdown: string) {
  const result = unified()
    .use(remarkParse, { sanitize: false })
    .use(remarkCustomHeaderId)
    .use(remarkRehype)
    // Внимание на следующую строку
    .use(rehypePrism)
    .use(rehypeStringify)
    .process(markdown);

  return (await result).toString();
}

Добавление подсветки необходимых языков

Prism поддерживает множество языков, но для того чтобы они заработали, необходимо подключить их.

import "prismjs/components/prism-bash";
import "prismjs/components/prism-json";
import "prismjs/components/prism-typescript";

Работа с плагинами Prism

Так же Prism поддерживает множество плагинов. Я для себя выбрал "line-numbers", "toolbar", "copy-to-clipboard" плагины.

Для того чтобы их активировать необходимо:

• Подключить код и стили этих плагинов;
• Указать пакету rehype-prism что их необходимо использовать.

Подключение кода и стилей этих плагинов

Добавим импорт стилей для плагинов в компонент Post.

import "prismjs/plugins/line-numbers/prism-line-numbers.css";
import "prismjs/plugins/toolbar/prism-toolbar.css";

Использование плагинов

Пакет rehype-prism поддерживает нужные мне плагины из коробки, необходимо только указать что их следует использовать.

export default async function markdownToHtml(markdown: string) {
  const result = unified()
    .use(remarkParse, { sanitize: false })
    .use(remarkCustomHeaderId)
    .use(remarkRehype)
    // Внимание на следующую строку
    .use(rehypePrism, {
      plugins: ["line-numbers", "toolbar", "copy-to-clipboard"],
    })
    .use(rehypeStringify)
    .process(markdown);

  return (await result).toString();
}

Подключение цветовой темы Prism

Prism поддерживает множество цветовых тем. Для того чтобы использовать выбранную тему, необходимо импортировать .css файл нужной темы.

import "prismjs/themes/prism.css";

На этом всё! 🎉

Результат можно посмотреть в любом из постов блога.

Подписывайтесь на мой Youtube канал, Telegram и на сообщество Вконтакте 🙂