Вопрос или проблема
Я знаю, что могу отображать изображение с помощью следующего синтаксиса:
![](/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) обычной вставки изображения (см. код ниже).
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.