Продолжаем работать над улучшением блога. В этой статье расскажем как добавляли подсветку кода (синтаксиса) в постах.
Есть множество способов сделать это, мы же решили пойти самым простым путём и остановились на использовании пакета 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" плагины.
Для того чтобы их активировать необходимо:
Подключение кода и стилей этих плагинов
Добавим импорт стилей для плагинов в компонент 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";На этом всё! 🎉
Результат можно посмотреть в любом из постов блога.
