Можно ли напрямую вставить изображение в Markdown документ?

Вопрос или проблема

Я знаю, что могу отображать изображение с помощью следующего синтаксиса:

![](/imagepath)

Однако, возможно ли также встраивать изображение непосредственно в документ, чтобы поделиться Markdown документом с изображением, содержащимся прямо внутри него?

Да, это возможно, используя data: URI и base64. Очень неэффективно, однако:

![Hello World](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAUCAAAAAAVAxSkAAABrUlEQVQ4y+3TPUvDQBgH8OdDOGa+oUMgk2MpdHIIgpSUiqC0OKirgxYX8QVFRQRpBRF8KShqLbgIYkUEteCgFVuqUEVxEIkvJFhae3m8S2KbSkcFBw9yHP88+eXucgH8kQZ/jSm4VDaIy9RKCpKac9NKgU4uEJNwhHhK3qvPBVO8rxRWmFXPF+NSM1KVMbwriAMwhDgVcrxeMZm85GR0PhvGJAAmyozJsbsxgNEir4iEjIK0SYqGd8sOR3rJAGN2BCEkOxhxMhpd8Mk0CXtZacxi1hr20mI/rzgnxayoidevcGuHXTC/q6QuYSMt1jC+gBIiMg12v2vb5NlklChiWnhmFZpwvxDGzuUzV8kOg+N8UUvNBp64vy9q3UN7gDXhwWLY2nMC3zRDibfsY7wjEkY79CdMZhrxSqqzxf4ZRPXwzWJirMicDa5KwiPeARygHXKNMQHEy3rMopDR20XNZGbJzUtrwDC/KshlLDWyqdmhxZzCsdYmf2fWZPoxCEDyfIvdtNQH0PRkH6Q51g8rFO3Qzxh2LbItcDCOpmuOsV7ntNaERe3v/lP/zO8yn4N+yNPrekmPAAAAAElFTkSuQmCC)

К сожалению, Super User не позволяет data: URI, это выглядело бы так:

введите описание изображения здесь

Сработает это, конечно, зависит от того, что вы используете для (пред)просмотра документа. Это должно поддерживать и разрешать data: URI.

Я провел некоторые тесты, и встраивание обычно работает с онлайн-редакторами markdown, такими как dillinger.io, jbt.github.io, stackedit.io, так что этот вопрос не настолько однозначен, как написал @Spiff выше.

Это снимок экрана двух блоков base64, вставленных с использованием 1) внутренней ссылки и 2) обычной вставки изображения (см. код ниже).

pngтестеры

1) указанный base64-блок перестает обрабатываться прямо в том месте, где начинается ‘новый фрагмент изображения’, зеленая часть ... So4Z4wxkXa7KukmKul2dDvd ...
2) при прямой передаче блока мы получаем целое изображение

код

1\)![png тестер1][pngтестер1] 2\)![png тестер2](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHoAAABkCAYAAABJhSQPAAAACXBIWXMAAAsTAAALEwEAmpwYAAADf0lEQVR42u3dW2vTYBzH8eeUPDm0adN2adeddNMpo2ObXoypsDvFd+WbEfRSUUHvxIFOEXG7UEFR5xybulO3tU3XpF4JIiJ43Pw/v+8LKP3nQ54nIaTlC2fOXGKIfAKHANAI0AjQCNAI0AjQCNAI0AjQgEaARoBGgEaARoBGgEaARoBGgAY0AjQCNAI0AjQCNAI0AjQCNKARoBGgEaARoNE/T+EQHL4SwXhsCbnrKWvHU3bdV3rHV3rPlXrPkbqppY5tYXUkVx3JZSo4Z4wxkXa7KukmKul2dDvdd+Mk9ltJ7DeTGNAHXFML+Slnu6slnVkpOfm1og5bttC/8lmp4LwtuGhbzGo40t1kFs7ogyjljNV9ZS9V3OB11Su97XUrWLqJFFtcLEdu9vmRTPSq3+vDHk2oli3k66qXWzie7V8r6AIuxogty+/KbvbxydzActmJcNVNrIYW6uloED0ay4/i9opg64GlH4yHgwe57wL6L/YhtN17k4Xh95HT8z99b0D/xBl891Rx5DDuv4D+AzW1kHMThaFnRzOD//McgP5BT0aD6N5UYYzCLID+Th/ztnPzXFSr+ypDZSZAf3MvPF/LVw/7rRKgf6NtX9nXZsvjW1krS3E+QDPGXgz64e2ZngnKMxoPfXeqMPh0NBimPqex0G3FxfXZythKSZdMmNdI6B1XWlcu9J1uauGYMrNx0OuBpS9f7JsxbW6joD+EtnvlfHXaxFVMABnQpJZrk5GNgN51pDJxTzYKuiM5v3q+epoh2tA3zkUn91zpgpkw9P3xfHWp4pZBTBj6bcXNUnwCBeivatlCXpstY1+mDn1nuucYWIlDv+z3cm+qbi9YCUO3FRe3zkZTICUOPV8L+8BJHLruKevJiWAEnMSh5ybDI6AkDr2VUfbLAR/LNnXo+Vo4AEbi0E0t5IshH9DUoRdHggiEBkA/rOWPg5A49GpBeynHD+KRh148lsUjSOrQKWfs2dHMEPiIQ28ElgM6A6Df9Ho50BkA/arfw20VdeiUM7ZW1EXQEYduaIl3uk2A3sjhQswI6PWc7YHNAOjNwAK0CdBbGUAbAb3r4RUbI6BbWtpgMwC6rbgFNgOgv/z1DyIOLdJuF2wGQNud7j7YDIB24qQNNgOgM42kCTYDoPO7+w2wGQAd1gFtBHRxuw1oE6AL2/stsBkA7cVJB2w/32c7r8DNq/e3jAAAAABJRU5ErkJggg==)

_1\) указанный base64-блок перестает обрабатываться прямо в том месте, где начинается 'новый фрагмент изображения', зеленая часть `... So4Z4wxkXa7KukmKul2dDvd ...`  
2\) при прямой передаче блока мы получаем целое изображение_

Это было протестировано с помощью http://tmpvar.com/markdown.html. Я не знаю, как это ведет себя на github. [Вопрос](https://github.com/github/markup/issues/270) уже подробно обсуждался.

[pngтестер1]:data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHoAAABkCAYAAABJhSQPAAAACXBIWXMAAAsTAAALEwEAmpwYAAADf0lEQVR42u3dW2vTYBzH8eeUPDm0adN2adeddNMpo2ObXoypsDvFd+WbEfRSUUHvxIFOEXG7UEFR5xybulO3tU3XpF4JIiJ43Pw/v+8LKP3nQ54nIaTlC2fOXGKIfAKHANAI0AjQCNAI0AjQCNAI0AjQgEaARoBGgEaARoBGgEaARoBGgAY0AjQCNAI0AjQCNAI0AjQCNKARoBGgEaARoNE/T+EQHL4SwXhsCbnrKWvHU3bdV3rHV3rPlXrPkbqppY5tYXUkVx3JZSo4Z4wxkXa7KukmKul2dDvdd+Mk9ltJ7DeTGNAHXFML+Slnu6slnVkpOfm1og5bttC/8lmp4LwtuGhbzGo40t1kFs7ogyjljNV9ZS9V3OB11Su97XUrWLqJFFtcLEdu9vmRTPSq3+vDHk2oli3k66qXWzie7V8r6AIuxogty+/KbvbxydzActmJcNVNrIYW6uloED0ay4/i9opg64GlH4yHgwe57wL6L/YhtN17k4Xh95HT8z99b0D/xBl891Rx5DDuv4D+AzW1kHMThaFnRzOD//McgP5BT0aD6N5UYYzCLID+Th/ztnPzXFSr+ypDZSZAf3MvPF/LVw/7rRKgf6NtX9nXZsvjW1krS3E+QDPGXgz64e2ZngnKMxoPfXeqMPh0NBimPqex0G3FxfXZythKSZdMmNdI6B1XWlcu9J1uauGYMrNx0OuBpS9f7JsxbW6joD+EtnvlfHXaxFVMABnQpJZrk5GNgN51pDJxTzYKuiM5v3q+epoh2tA3zkUn91zpgpkw9P3xfHWp4pZBTBj6bcXNUnwCBeivatlCXpstY1+mDn1nuucYWIlDv+z3cm+qbi9YCUO3FRe3zkZTICUOPV8L+8BJHLruKevJiWAEnMSh5ybDI6AkDr2VUfbLAR/LNnXo+Vo4AEbi0E0t5IshH9DUoRdHggiEBkA/rOWPg5A49GpBeynHD+KRh148lsUjSOrQKWfs2dHMEPiIQ28ElgM6A6Df9Ho50BkA/arfw20VdeiUM7ZW1EXQEYduaIl3uk2A3sjhQswI6PWc7YHNAOjNwAK0CdBbGUAbAb3r4RUbI6BbWtpgMwC6rbgFNgOgv/z1DyIOLdJuF2wGQNud7j7YDIB24qQNNgOgM42kCTYDoPO7+w2wGQAd1gFtBHRxuw1oE6AL2/stsBkA7cVJB2w/32c7r8DNq/e3jAAAAABJRU5ErkJggg==

Это было протестировано с http://tmpvar.com/markdown.html. Для поведения на github, вопрос уже подробно обсуждался (и отклонен).

GitHub, markdown-it и Google docs теперь поддерживают встраивание изображений в Markdown.

Самый удобный способ использования этой функции — это ссылка на встроенные изображения, которые будут включены в конец документа:

![Hello World][hello_world_img_base64]

Некоторый другой текст.

[hello_world_img_base64]: <data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAUCAAAAAAVAxSkAAABrUlEQVQ4y+3TPUvDQBgH8OdDOGa+oUMgk2MpdHIIgpSUiqC0OKirgxYX8QVFRQRpBRF8KShqLbgIYkUEteCgFVuqUEVxEIkvJFhae3m8S2KbSkcFBw9yHP88+eXucgH8kQZ/jSm4VDaIy9RKCpKac9NKgU4uEJNwhHhK3qvPBVO8rxRWmFXPF+NSM1KVMbwriAMwhDgVcrxeMZm85GR0PhvGJAAmyozJsbsxgNEir4iEjIK0SYqGd8sOR3rJAGN2BCEkOxhxMhpd8Mk0CXtZacxi1hr20mI/rzgnxayoidevcGuHXTC/q6QuYSMt1jC+gBIiMg12v2vb5NlklChiWnhmFZpwvxDGzuUzV8kOg+N8UUvNBp64vy9q3UN7gDXhwWLY2nMC3zRDibfsY7wjEkY79CdMZhrxSqqzxf4ZRPXwzWJirMicDa5KwiPeARygHXKNMQHEy3rMopDR20XNZGbJzUtrwDC/KshlLDWyqdmhxZzCsdYmf2fWZPoxCEDyfIvdtNQH0PRkH6Q51g8rFO3Qzxh2LbItcDCOpmuOsV7ntNaERe3v/lP/zO8yn4N+yNPrekmPAAAAAElFTkSuQmCC>

Нет, документ Markdown — это просто текстовый файл, и текстовые редакторы (даже те, которые понимают Markdown) не знают, что делать с блоком двоичных данных изображения в середине текстового файла.

Есть такие методы, как MIME и base64, чтобы в некотором смысле кодировать двоичные данные в текстовом файле, но большинство текстовых редакторов и рендереров Markdown не знают, что делать с документом, закодированным в MIME, который содержит часть текста Markdown и часть изображения, закодированного в base64.

.

Ответ или решение

Вопрос о возможности прямого встраивания изображений в документ в формате Markdown вызывает значительный интерес среди пользователей, особенно для тех, кто стремится делиться самодостаточными документами без необходимости прикладывать отдельно файлы изображений. Прежде всего, давайте разберемся в теоретических основах этой возможности.

Теория

Markdown, изначально созданный как легкий язык разметки, предназначен для преобразования текста в различный форматированный контент. Одним из популярных элементов Markdown являются изображения, которые добавляются с помощью синтаксиса ![описание](путь_к_изображению). Такой подход подразумевает наличие изображения в вашем файловом хранилище или в сети, и его отображение реализуется путем ссылки на это местоположение.

Однако при рассмотрении вопроса о встраивании изображений непосредственно в текстовую структуру самого Markdown-документа, становится понятно, что Markdown сам по себе не поддерживает хранение бинарных объектов, таких как изображения. Это связано с тем, что Markdown является текстовым форматом, который читается и обрабатывается в основном текстовыми редакторами и не предусматривает операции с бинарными данными.

Пример

Тем не менее, вы можете использовать обходное решение с помощью URI-данных (data URIs) в комбинации с кодированием base64. Этот метод позволяет преобразовать бинарные данные изображения в текстовый формат, который затем можно вставить непосредственно в Markdown-документ. Вот пример, как это может выглядеть:

![Hello World](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAUCAAAAAAVAxSkAAABrUlEQVQ4y+3TPUvDQBgH8OdDOGa+oUMgk2MpdHIIgpSUiqC0OKirgxYX8QVFRQRpBRF8KShqLbgIYkUEteCgFVuqUEVxEIkvJFhae3m8S2KbSkcFBw9yHP88+eXucgH8kQZ/jSm4VDaIy9RKCpKac9NKgU4uEJNwhHhK3qvPBVO8rxRWmFXPF+NSM1KVMbwriAMwhDgVcrxeMZm85GR0PhvGJAAmyozJsbsxgNEir4iEjIK0SYqGd8sOR3rJAGN2BCEkOxhxMhpd8Mk0CXtZacxi1hr20mI/rzgnxayoidevcGuHXTC/q6QuYSMt1jC+gBIiMg12v2vb5NlklChiWnhmFZpwvxDGzuUzV8kOg+N8UUvNBp64vy9q3UN7gDXhwWLY2nMC3zRDibfsY7wjEkY79CdMZhrxSqqzxf4ZRPXwzWJirMicDa5KwiPeARygHXKNMQHEy3rMopDR20XNZGbJzUtrwDC/KshlLDWyqdmhxZzCsdYmf2fWZPoxCEDyfIvdtNQH0PRkH6Q51g8rFO3Qzxh2LbItcDCOpmuOsV7ntNaERe3v/lP/zO8yn4N+yNPrekmPAAAAAElFTkSuQmCC)

Применение

При использовании данной методики стоит отметить несколько важных моментов. Во-первых, кодирование base64 увеличивает размер файла, что может быть неэффективным при работе с большими изображениями. Во-вторых, не все Markdown-редакторы поддерживают отображение встроенных data URIs, поэтому результат может варьироваться в зависимости от используемого инструмента. Теоретически, браузеры и многие онлайн-редакторы, такие как Dillinger или IT редакторы, могут поддерживать это, однако локальные текстовые редакторы могут испытывать проблемы.

Заключение

С одной стороны, метод с кодированием base64 и использованием data URIs предоставляет возможность встраивания изображений без привязки к внешним ресурсам. С другой стороны, потребление лишнего объема данных и потенциальные несовместимости с различными Markdown-вижуализаторами могут всерьез ограничить практическую ценность этого подхода. Поэтому подобный способ следует рассматривать как дополнительную возможность, а не как основную стратегию работы с изображениями в документах Markdown.

Оцените материал
Добавить комментарий

Капча загружается...