마크 다운 문서에 이미지를 직접 포함시킬 수 있습니까?

31

다음 구문으로 이미지를 표시 할 수 있음을 알고 있습니다.

![](/imagepath)

그러나 이미지를 문서에 직접 포함시켜 마크 다운 문서를 이미지 파일과 직접 포함 된 이미지 파일과 공유 할 수도 있습니까?

markdown

— 오쉬로
소스

44

예, data:URI 와 base64를 사용하는 것이 가능합니다 . 굉장히 비효율적입니다.

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

불행히도 슈퍼 유저는 data:URI를 허용하지 않습니다 .

이것이 작동하는지 여부는 문서를 (사전)보기 위해 사용하는 것에 달려 있습니다. data:URI 를 지원하고 허용해야 합니다.

— 다니엘 B
소스

매우 흥미 롭습니다, 감사합니다! 이 형식을 해석하고 표시 할 수있는 인기있는 Markdown 편집기에 대해 알고 있습니까?

— orschiro

2

@orschiro 죄송합니다. 죄송합니다. 난 그냥 마크 다운을 손으로 씁니다. 그러나 이론적으로는 문서를 HTML로 "컴파일"하고 표시해야하는 편집기가 있습니다.

— Daniel B

5

" 참조 스타일 이미지 구문 " 을 사용하는 경우 적어도 Markdown 페이지의 맨 아래에 base64 코드를 묻을 수 있습니다. ![My image up in the page][1]어떤 시점에서[1]: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

— ruffin

sintax에 맞습니다. 그러나 일부 서비스는이를 잘못 처리합니다 (예 : Github Wiki 등)

— CarlosCarucce

2

아니요, 마크 다운 문서는 텍스트 파일 일 뿐이며 텍스트 편집기 (마크 다운에 정통한 문서 포함)는 텍스트 파일 중간에 이진 이미지 데이터로 처리 할 작업을 알지 못합니다.

바이너리 데이터를 텍스트 파일로 어떤 의미로 인코딩하는 MIME 및 base64와 같은 방법이 있지만 대부분의 텍스트 편집기 및 Markdown 렌더링 프로그램은 Markdown 텍스트 부분과 base64 인코딩 이미지가 포함 된 MIME 인코딩 문서로 수행 할 작업을 알지 못합니다 부품.

— iff
소스

0

필자는 몇 가지 테스트를 수행하고 일반적으로 dillinger.io, jbt.github.io, stackedit.io 와 같은 온라인 마크 다운 편집기에서 작동 하므로 @Spiff가 쓴 것처럼이 주제는 흑백이 아닙니다.

이것은 1) 내부 참조 및 2) 공통 이미지 삽입 (아래 코드 참조) 을 사용하여 삽입 된 두 개의 base64 블록의 스크린 샷입니다 .

pngtesters

1) 참조 된 base64 블록은 '새로운 이미지 덩어리'가 시작되는 지점에서 바로 구문 분석을 중단합니다. 녹색 부분 ... So4Z4wxkXa7KukmKul2dDvd ...
2) 블록을 직접 전달하여 전체 이미지를 얻습니다.

암호

1\)![png tester1][pngtester1] 2\)![png tester2](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\) the referenced base64 block stops being parsed right at the point where 'a new chunk of image' starts, the green part `... So4Z4wxkXa7KukmKul2dDvd ...`  
2\) by passing the block directly we get the whole image_

This was tested with http://tmpvar.com/markdown.html. I don't know how it behaves on github. [The issue](https://github.com/github/markup/issues/270) has been already well discussed.

[pngtester1]: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에서 어떻게 작동하는지 모르겠습니다. 이 문제 는 이미 잘 논의되었습니다.

— zer0mode
소스