क्या किसी मार्कडाउन दस्तावेज़ में सीधे छवि को एम्बेड करना संभव है?

31

मुझे पता है कि मैं निम्नलिखित सिंटैक्स के साथ एक छवि प्रदर्शित कर सकता हूं:

![](/imagepath)

हालाँकि, क्या यह भी संभव है कि मार्कडाउन डॉक्यूमेंट को सीधे इमेज फाइल के साथ साझा करने के लिए डॉक्यूमेंट में एक इमेज को सीधे इनसाइड करें?

markdown

— orschiro
स्रोत

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:URIs की अनुमति नहीं देता है, यह इस तरह दिखेगा:

क्या यह निश्चित रूप से काम करेगा, इस बात पर निर्भर करता है कि आप जो भी उपयोग कर रहे हैं (पूर्व) दस्तावेज़ देखें। इसे data:यूआरआई का समर्थन और अनुमति देनी होगी ।

— डैनियल बी
स्रोत

बहुत दिलचस्प है, धन्यवाद! क्या आप किसी भी लोकप्रिय मार्कडाउन संपादकों के बारे में जानते हैं जो इस प्रारूप की व्याख्या और प्रदर्शन कर सकते हैं।

— ओशोइरो

2

@orschiro दुर्भाग्य से नहीं, क्षमा करें। मैं सिर्फ हाथ से मार्कडाउन लिखता हूं। हालांकि, सिद्धांत रूप में, कोई भी संपादक जो HTML को दस्तावेज़ को "संकलित" करता है और प्रदर्शित करता है कि उसे करना चाहिए।

— डैनियल बी

5

शायद यह जोड़ने के लायक है कि यदि आप " संदर्भ-शैली की छवि सिंटैक्स " का उपयोग करते हैं , तो आप कम से कम बेस 64 कोड को अपने मार्कडाउन पेज के नीचे दफन कर सकते हैं। ![My image up in the page][1]इसके बाद कुछ बिंदु पर[1]: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

— रफिन

सिंटेक्स पर सही लगता है। लेकिन कुछ सेवाएं इसे गलत तरीके से संभालेंगी (उदाहरण के लिए,

— गितुब

2

नहीं, एक मार्कडाउन डॉक्यूमेंट सिर्फ एक टेक्स्ट फाइल है, और टेक्स्ट एडिटर (यहां तक कि मार्कडाउन-सेवी वाले) को यह नहीं पता होगा कि टेक्स्ट फाइल के बीच में बाइनरी इमेज डेटा के ब्लॉब के साथ क्या करना है।

बाइनरी डेटा को एक अर्थ में बाइनरी डेटा को एनकोड करने के लिए MIME और base64 जैसे तरीके हैं, लेकिन ज्यादातर टेक्स्ट एडिटर्स और मार्कडाउन-रेंडरर्स को यह पता नहीं होगा कि MIME एनकोडेड डॉक्यूमेंट के साथ क्या करना है जिसमें एक मार्कडाउन टेक्स्ट पार्ट और एक बेस 64 कोडेड इमेज शामिल है अंश।

— आकर्षक बनाएं
स्रोत

0

मैंने कुछ परीक्षण किए और एम्बेडिंग आमतौर पर ऑनलाइन मार्कडाउन संपादकों जैसे कि dillinger.io, jbt.github.io, stackedit.io के साथ काम करता है , इसलिए यह विषय इतना काला और सफेद नहीं है जैसा कि @Spiff ने ऊपर लिखा है।

इस का उपयोग कर डाला दो बेस 64 ब्लॉक के एक स्क्रीनशॉट है 1) एक आंतरिक संदर्भ और 2) एक आम छवि प्रविष्टि (नीचे दिए गए कोड को देखें)।

pngtesters

1) संदर्भित बेस 64 ब्लॉक ठीक उस बिंदु पर पार्स किया जा रहा है जहाँ 'छवि का एक नया हिस्सा' शुरू होता है, हरे भाग ... 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 के साथ परीक्षण किया गया था । मुझे नहीं पता कि यह गीथब पर कैसे व्यवहार करता है। इस मुद्दे पर पहले ही चर्चा हो चुकी है।

— zer0mode
स्रोत