Добавление плагинов Markdown в Remix

Теперь, когда наш сайт на базе Remix Markdown запущен и работает, давайте посмотрим, как его можно немного улучшить, добавив несколько классных плагинов для Markdown.

Для этой статьи мы добавим плагин оглавления Rehype.

Установка плагина Rehype

Для начала нам нужно добавить плагин в наш проект.
Чтобы использовать плагин оглавления, нам также нужно установить плагины slug и auto-link headings, так как он зависит от них.

npm i rehype-autolink-headings rehype-to rehype-slug

После установки этих плагинов нам нужно зарегистрировать их в Remix. К счастью, Remix поставляется с файлом remix.config.js.

Мы можем добавить секцию mdx в этот файл и загрузить наши плагины.

module.exports = {
  // Existing lines,
  mdx: async (filename) => {
    const [rehypeSlug, rehypeAutolinkHeadings, rehypeToc] = await Promise.all([
      import('rehype-slug').then((mod) => mod.default),
      import('rehype-autolink-headings').then((mod) => mod.default),
      import('rehype-toc').then((mod) => mod.default),
    ]);
    return {
      rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings, rehypeToc],
    };
  },
};

Теперь, когда мы загрузили все три плагина, все уже будет работать! Нет необходимости добавлять что-либо еще в нашу разметку.
Мы можем попробовать, запустив outcode, и посмотреть, что произойдет.

Вы также можете найти полный код на GitHub.

Спасибо, что прочитали, и давайте общаться!

Спасибо, что читаете мой блог. Не стесняйтесь подписываться на мою рассылку по электронной почте и подключайтесь к Facebook или Twitter.