Как добавить имя файла в блок кода в блоге Astro

В большинстве случаев добавление имени файла в блок кода дает читателю контекст. Это помогает читателю решить, какой файл создается или изменяется. Имя файла в блоке кода многократно повышает удобство чтения.

Теперь вопрос в том, как добавить имя файла внутри ограждения кода уценки. Возможно ли это даже с уценкой?

Так что ответ нет. Спецификация уценки по умолчанию не поддерживает передачу чего-либо, кроме языка кода. Забудьте о передаче имени файла из-за барьера кода.

Но вы можете расширить возможности уценки с помощью плагинов. Astro использует Remark для обработки файлов уценки. Поэтому вы можете использовать плагин Remark и Rehype с Astro с минимальной конфигурацией.

Использование расширения comment-code-titles

В этом блоге я использую плагин remark-code-titles. Этот плагин анализирует имя файла из ограждения кода уценки и отображает его в документе HTML.

Вы можете передать имя файла, используя нотацию :filename, для ограждения кода в файле уценки. Это расширение анализирует уценку и извлекает из нее имя файла. Затем он отображает имя файла как элемент <div> над блоком кода. В дополнение к этому, он также применяет класс remark-code-title к каждому сгенерированному <div>. Это делает стиль более удобным.

Монтаж

Давайте установим плагин remark-code-titles используя npm.

npm i remark-code-titles

Конфигурация

Теперь откройте файл astro.config.mjs в своем проекте и измените конфигурацию уценки. Эта модификация также будет работать для файлов mdx.

import remarkCodeTitles from "remark-code-titles";

export default defineConfig({
  markdown: { remarkPlugins: [remarkCodeTitles] },
  integrations: [
    mdx(),
  ],
});

Здесь я добавляю плагин remarkCodeTitles как remarkPlugins в файлы конфигурации Astro.

Использование в уценке и документе MDX

Чтобы использовать этот плагин, откройте новый документ markdown или MDX. Затем добавьте ограждение кода, используя 3 обратных кавычки. Затем добавьте имя файла блока кода, используя синтаксис :filename. Вот и все.

Теперь вы можете увидеть дополнительный элемент <div> над отрендеренным блоком кода, который содержит имя файла. Вы можете стилизовать элемент с помощью CSS, ориентируясь на уникальный класс remark-code-title.

Заключение

В этом блоге вы узнали, как добавить имя файла или заголовок в блок кода. Это можно просто сделать с помощью плагина для заметок под названием remark-code-titles. Astro предлагает очень простой способ интеграции плагинов Remark и Rehype. Ознакомьтесь с официальной документацией Astro, чтобы узнать больше о расширениях уценки.