--- metadata: - name: generator content: Diplodoc Platform v5.52.0 alternate: - https://3y3.dev/en/syntax/media.md - https://3y3.dev/ru/syntax/media.md - href: ru/syntax/media.md type: text/markdown title: Markdown version - href: ../llms.txt type: text/markdown title: llms.txt updatedAt: '2026-07-21T06:39:54.000Z' --- > **Documentation Index:** Fetch the complete configuration index at https://3y3.dev/ru/llms.txt # Медиа ## Изображения {#images} Изображения должны храниться в каталоге, имя которого начинается с символа `_`, иначе они будут удалены при сборке. Рекомендуемый размер загружаемого файла — 5 МБ, максимальный — 10 МБ. Стандартная разметка для вставки изображения имеет вид: ``` ![alt-текст](_images/image.png "текст_подсказки"){width=100 height=100} ``` * `alt-текст` — работает как [атрибут alt в HTML](https://en.wikipedia.org/wiki/Alt_attribute). Отображается, если изображение не загружено, используется для SEO и чтения скринридерами. {% note info %} Чтобы отобразить alt-текст в SVG-изображении, добавьте [атрибут `inline=false`](#img-inline). {% endnote %} * `_images/image.png` — URL или путь до файла изображения. * `"текст_подсказки"` — подсказка, которая будет отображаться при наведении на изображение. Необязательный параметр. * `width=100`, `height=100` — размер изображения. Необязательные параметры. {% note tip %} Если вы хотите сохранить оригинальное соотношение сторон изображения, укажите только его ширину: `width=100`. {% endnote %} {% note warning %} Не рекомендуется использовать передачу размера изображения через `=100x200` внутри скобок со ссылкой — этот формат нарушает обратную совместимость с markdown-разметкой. {% endnote %} ### Изображение-ссылка {#image-link} Вы можете сделать изображение кликабельным, используя [правила оформления ссылок](https://3y3.dev/ru/syntax/links.md). Для этого добавьте стандартную разметку изображения в ту часть, которая предназначена для указания текста ссылки. ```markdown [![An old rock in the desert](../_images/mountain.jpg "Mountain"){width=100 height=200}](https://yandex.com/images/search?text=mountain) ``` **Результат:** [![An old rock in the desert](../_images/mountain.jpg "Mountain"){width=100 height=200}](https://yandex.com/images/search?text=mountain) ### Reference-style разметка для изображений {#reference-style} Аналогично [reference-style ссылкам](https://3y3.dev/ru/syntax/links.md#reference-style), вы можете один раз объявить изображение в специальном месте, а в остальном документе обращаться к нему по метке. Это позволит использовать изображение несколько раз, не перегружая текст длинными URL или другими параметрами. ```markdown ![An old rock in the desert][image1] [image1]: ../_images/mountain.jpg "Mountain" ``` **Результат:** ![An old rock in the desert][image1] [image1]: ../_images/mountain.jpg "Mountain" ### Инлайнинг SVG {#img-inline} Если в документации используются SVG-изображения, Diplodoc при генерации встраивает их напрямую в HTML-код в виде тега ``. Такое решение позволяет применять настройки текущей темы документации к SVG. Для форсированного отключения инлайнинга SVG используйте атрибут `inline=false`, тогда ``` ![](_images/image.svg){inline=false} ``` будет преобразован в ```html ``` Управлять инлайнингом SVG-изображений на уровне проекта можно с помощью настройки ##[maxInlineSvgSize](https://3y3.dev/ru/settings.md#content)##, которая ограничивает максимальный размер встраиваемых изображений. Для отключения инлайнинга SVG установите `maxInlineSvgSize` равным **нулю**. {% note info %} Настройка изображения `inline` имеет более высокий приоритет, чем настройка проекта `maxInlineSvgSize`: если у SVG-изображения установлен параметр `inline=true` и оно превышает заданное ограничение размера, встраивание в HTML-код будет выполнено. {% endnote %} ## Видео {#video} {% note info %} Поддерживаемый список видеохостингов: Yandex, Rutube, VK, Youtube, Vimeo, Vine, Osf, Prezi. Если ваш видеохостинг не поддерживается, но у него есть кнопка экспорта видео, то воспользуйтесь разделом [Видео из другого видеохостинга](#unsupported-player). {% endnote %} ### Видео из поддерживаемого видеохостинга {#supported-host} 1. Чтобы добавить на страницу видео, используйте разметку: ```markdown @[название_хостинга](id_видео_или_ссылка_на_него) ``` 1. Замените `название_хостинга` на название видеохостинга из списка: `yandex`, `rutube`, `vk`, `youtube`, `vimeo`, `vine`, `osf`, `prezi`. 1. Откройте страницу с видео, которое нужно встроить в документацию. {#href-for-video} 1. Найдите код для публикации видео (код можно найти при экспорте в теге `iframe`, например, в разделе «Поделиться»). ```html ``` 1. Замените `id_видео_или_ссылка_на_него` на ссылку из атрибута `src`. **Пример разметки:** ```markdown @[vk](https://vk.com/video_ext.php?oid=-207738372&id=456239060&hd=2&autoplay=1) ``` **Результат:** @[vk](https://vk.com/video_ext.php?oid=-207738372&id=456239060&hd=2&autoplay=1) {% note alert %} Если видео не отображается, и окно проигрывателя выдает ошибку `ERR_BLOCKED_BY_CSP`: 1\. Откройте `.yfm` файл конфигурации. 2\. Добавьте видеохостинг в список разрешенных доменов. ```yaml resources: csp: - "frame-src": - "ссылка_на_видеохостинг" ``` {% cut "Пример конфигурации" %} ```yaml allowHtml: true langs: ['en','ru'] resources: csp: - "frame-src": - "https://vk.com" - "https://login.vk.com" - "https://runtime.strm.yandex.ru" docs-viewer: langs: ['en','ru'] ... ``` {% endcut %} {% endnote %} ### Видео из другого видеохостинга {#unsupported-player} 1. Чтобы добавить на страницу видео, используйте разметку: ``` @[](id_видео_или_ссылка_на_него) ``` 1. Получите ссылку на [видео](#href-for-video). 1. Замените `id_видео_или_ссылка_на_него` на полученную ссылку. **Пример разметки:** ```markdown @[](https://frontend.vh.yandex.ru/runtime/player/video/vplvic7jsotpobyc7o5b?autoplay=0&branding=0&from=documentation&mute=0&redirect_from=ugc) ``` **Результат:** @[](https://frontend.vh.yandex.ru/runtime/player/video/vplvic7jsotpobyc7o5b?autoplay=0&branding=0&from=documentation&mute=0&redirect_from=ugc)