remark-unwrap-images: манипуляции с изображениями

Для работы с remark-unwrap-images требуется базовая установка экосистемы Remark. В первую очередь необходимо установить ядро Remark и соответствующий плагин:

npm install remark remark-unwrap-images

Подключение в коде осуществляется через CommonJS или ES-модули:

import { remark } from 'remark';
import unwrapImages from 'remark-unwrap-images';

Основная функциональность

Плагин remark-unwrap-images предназначен для удаления обёртки вокруг изображений, обычно

или других блочных элементов, которые Remark добавляет по умолчанию при преобразовании Markdown в HTML.

Markdown-код:

![Alt-текст](image.png)

Без использования плагина обычно преобразуется в:

Alt-текст

С remark-unwrap-images результат будет:

Alt-текст

Это особенно полезно при верстке, где

может нарушать стили или вызывать лишние отступы.

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

Плагин remark-unwrap-images не требует сложной настройки, но можно передавать опции через объект конфигурации. Пример использования:

remark()
  .use(unwrapImages, { stripParagraph: true })
  .process(markdownContent)
  .then(file => {
    console.log(String(file));
  });

Параметр stripParagraph указывает на необходимость удаления всех обёрток

вокруг изображений. По умолчанию значение true.

Интеграция с Rehype

Для полноценной обработки HTML после Remark часто используют Rehype. Основной сценарий — конвертация Markdown → AST → HTML с возможностью дальнейших трансформаций:

import { remark } from 'remark';
import html from 'remark-html';
import unwrapImages from 'remark-unwrap-images';

const markdown = '![Пример](example.png)';

remark()
  .use(unwrapImages)
  .use(html)
  .process(markdown)
  .then(file => {
    console.log(String(file));
  });

Результат будет чистым без обёртки

, что упрощает стилизацию через CSS.

Работа с вложенными структурами

Иногда изображения находятся внутри ссылок или других элементов:

[![Alt](image.png)](https://example.com)

remark-unwrap-images корректно обрабатывает такие случаи, оставляя обёртку и удаляя лишний

вокруг :


  Alt

Это позволяет сохранять семантику ссылок и при этом избавляться от лишних блочных тегов.

Применение с другими плагинами Remark

remark-unwrap-images хорошо сочетается с плагинами, которые модифицируют изображения или Markdown-структуру:

  • remark-attr — добавление атрибутов к изображениям;
  • remark-emoji — вставка эмодзи;
  • remark-figure-caption — добавление подписей к картинкам.

Порядок подключения важен: сначала обрабатываются изменения структуры, затем выполняется unwrap, чтобы результат был корректным:

remark()
  .use(remarkFigureCaption)
  .use(unwrapImages)
  .use(html)
  .process(markdown)
  .then(file => console.log(String(file)));

Работа с AST

remark-unwrap-images напрямую взаимодействует с Markdown AST (mdast). Плагин проходит по всем узлам paragraph и проверяет, содержит ли параграф только image. Если да, параграф заменяется на image узел:

import { visit } from 'unist-util-visit';

function unwrapImagesPlugin() {
  return (tree) => {
    visit(tree, 'paragraph', (node, index, parent) => {
      if (node.children.length === 1 && node.children[0].type === 'image') {
        parent.children[index] = node.children[0];
      }
    });
  };
}

Такой подход демонстрирует принцип работы плагина: минимизация структуры AST без потери данных изображения.

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

Для TypeScript проект нужно корректно типизировать AST:

import { Node } from 'unist';
import { visit } from 'unist-util-visit';

const unwrapImages = () => (tree: Node) => {
  visit(tree, 'paragraph', (node: any, index, parent) => {
    if (node.children.length === 1 && node.children[0].type === 'image') {
      parent.children[index] = node.children[0];
    }
  });
};

Это позволяет интегрировать плагин в строготипизированные проекты без ошибок компиляции.

Советы по оптимизации

  • Для больших документов использовать синхронный .processSync() вместо .process() для ускорения обработки.
  • Перед конвертацией в HTML рекомендуется очистка и фильтрация AST плагинами типа remark-remove-empty.
  • Если проект использует Next.js или Astro, remark-unwrap-images отлично вписывается в pipeline Markdown → HTML → JSX без лишних

    вокруг изображений.

Поддержка кастомных тегов

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

visit(tree, 'customBlock', (node, index, parent) => {
  if (node.children.length === 1 && node.children[0].type === 'image') {
    parent.children[index] = node.children[0];
  }
});

Так достигается гибкость при обработке нестандартных Markdown-расширений.

Оглавление