Привет! Вы хотите добавить немного изюминки в свой блог на Next.js, визуализируя Markdown с помощью Prism и Gray-Matter? Что ж, вам повезло! В этой статье я расскажу вам о нескольких методах достижения именно этой цели. Итак, приступим!

Прежде всего, нам нужно убедиться, что Next.js настроен и готов к работе. Предполагая, что у вас уже есть проект Next.js, давайте установим необходимые пакеты:

npm install gray-matter prismjs

Отлично! Теперь, когда мы разобрались с зависимостями, давайте перейдем к коду.

Метод 1: базовая интеграция

Самый простой способ отобразить Markdown с помощью Prism и Gray-Matter в Next.js — создать собственный компонент. Вот пример:

markdownContent } = Matter(content);
const html = Prism.highlight(markdownContent, Prism.languages.markup, ‘markup’);
return (

{data.title}

);
};
экспортировать MarkdownRenderer по умолчанию;

В этом фрагменте кода мы импортируем необходимые пакеты и настраиваем компонент MarkdownRenderer. Он принимает свойство content, которое представляет собой необработанный Markdown, и использует gray-matterдля извлечения вступительной части (метаданных) и фактического контента. Затем с помощью Prism мы выделяем содержимое Markdown и отображаем его как HTML.

Метод 2. Стилизация блока кода

Если вы хотите оформить блоки кода по-другому, вы можете изменить компонент MarkdownRendererследующим образом:

// ...
const MarkdownRenderer = ({ content }) => {
  // ...
  const html = Prism.highlight(
    markdownContent,
    Prism.languages.markup,
    'markup'
  );
  const codeBlocks = html.match(/<pre[\s\S]*?<\/pre>/g);
  return (
    <div>
      <h1>{data.title}</h1>
      {codeBlocks.map((block, index) => (
        <pre
          key={index}
          className="p-4 my-4 rounded bg-gray-800 text-white"
          dangerouslySetInnerHTML={{ __html: block }}
        />
      ))}
    </div>
  );
};
// ...

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

Метод 3: темы подсветки синтаксиса

Prism поставляется с различными темами, которые сделают ваши блоки кода визуально привлекательными. Чтобы использовать другую тему, выполните следующие действия:

Установите пакет темы. Например, давайте установим тему «prism-material-oceanic»:
```
npm install prism-material-oceanic
```

Импортируйте тему в файл конфигурации Next.js (например, next.config.js):

// ...
module.exports = {
 // ...
 webpack: (config, { isServer }) => {
   if (isServer) {
     require('./utils/prism-themes/prism-material-oceanic.css');
   }
// ...
   return config;
 },
};

В этом примере мы устанавливаем пакет темы «prism-material-oceanic» и импортируем его CSS-файл в нашу конфигурацию Next.js. Не забудьте настроить путь к файлу в соответствии со структурой вашего проекта.

Вот и все! Теперь у вас есть несколько методов для рендеринга Markdown с помощью Prism и Gray-Matter в вашем блоге Next.js. Не стесняйтесь комбинировать эти методы для достижения желаемых результатов.

Надеюсь, эта статья оказалась для вас полезной. Приятного кодирования!

Fcodenotes – блог о программировании

Наполните свой блог Next.js призмой и серым веществом: руководство по рендерингу Markdown

{data.title}