teitei's blog

雑に書くので雑に読んでください。

Markdown文書で画像の表示にURLを使わず埋め込む

今回から技術記事はHatenaBlogに書いていこうと思います。

忘備録

Markdownに画像を表示する場合、どうしていますか。おそらくimgurやGitHubなどに画像をアップロードしてURLを参照していると思います。

imgur.com

![airplane](https://homepages.cae.wisc.edu/~ece533/images/airplane.png)

が、機密性のある画像のURLをpublicに公開したくはないが、Markdownで書きたい場合はどうすればよいか。

A. Data URI schemeを使う

Data URI Schemeとはと言う方はWikipediaをどうぞ。

ja.wikipedia.org

何でも良いですが、画像をbase64 encodingします。

$ base64 airplane.png > airplane_base64.txt
![airplane](data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAIAAAB7GkOtAAAAB3RJTUUH0AESFgINTbbB1gAAAAlwSFlzAAC4jAAAuIwBzPa7LwAG32VJ.....)

この様に画像のURLを使わずに画像を埋め込むことが出来ました。

f:id:teitei_tk:20200425113315p:plain
markdown preview

問題点

GitHub flavored markdownではセキュリティ上に理由でbase64を利用した画像は使えません。

github.com

この点はGitHub flavoerd markdownを利用する時点である程度publicな文書だと思うのでおとなしくGitHubに画像をアップロードして使ったほうが良さそう。