mime タイプ

VSCode の場合

<img src="data:img/png;base64,aaaaaaaa">

は画像が表示されるけど

![image](data:img/png;base64,aaaaaaa)

は画像が表示されずソースの文字列がそのまま表示されます
mime タイプが正式な image/png じゃないと img タグにならないみたいです

img タグであれば正式 mime タイプでなくても動いてます
実際 img/png どころではなく極端に

<img src="data:;base64,aaaaaaaa">

と mime タイプ書かなくても画像が表示されます
img タグ化されてからはブラウザ（Electron だから Chrome 依存）の動作次第なので Chrome が対応してるからです
仕様は確認してませんが Chrome/Firefox は mime タイプなしでもロードされてます

marked の場合

JavaScript の有名な markdown パーサです
これは img/png だろうと data:;base64 だろうと markdown 記法で画像表示であればなんでも img タグにしてくれます
なのでブラウザ img タグの動作次第になります

github の場合

その他でよく使うのは github ですが 意外にも data スキームに非対応です
base64 で画像を埋め込むことができません
img タグには変換されるものの src 属性がなく壊れた画像アイコンになります

リポジトリのどこかのパス もしくは画像用リポジトリを用意するか画像用ブランチを作るなどで対処することになります
ただ gist の場合はブラウザ上のみで使うことが多いので少し面倒です
git を使って画像を埋め込むか github 中の何処かのコメント欄に画像をクリップボードにコピーした状態でペーストして github のサーバにアップロードする必要があります
ダウンロードして別の場所で使うことも考えれば git を使って同じリポジトリ中にいれたほうがいいのですが面倒なのですよね

だめな理由は svg のセキュリティどうこうらしくて現時点でも動かないです
https://github.com/github/markup/issues/270

base64 の書き方

改行を使って見やすくできます
折り返ししないなら 人が見る部分じゃないので 1 行にしてしまったほうがスッキリするかもなのでどっちがいいとは言いづらいですが この辺にも違いがあったのでまとめておきます

<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAAX
NSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMA
AA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0Lj
EuNWRHWFIAAAAuSURBVChTYyAM/uMApEhDOWCAIoLCAQMUERQO
GKCIoHDAAEUEwsEExEnjBAwMAN8Qj3HDGTF2AAAAAElFTkSuQm
CC
">

![image](data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAAX
NSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMA
AA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0Lj
EuNWRHWFIAAAAuSURBVChTYyAM/uMApEhDOWCAIoLCAQMUERQO
GKCIoHDAAEUEwsEExEnjBAwMAN8Qj3HDGTF2AAAAAElFTkSuQm
CC)

VSCode の場合

上は問題ないですが 下は img タグに変換されません
VSCode のパーサは結構判定が厳しめみたいです

marked の場合

marked はどちらも対応してます
ただ ほかパーサにも言えますが 空行があるとタグの途中でも別段落として分割されてしまうので空行を作ることはできません

github の場合

表示はできないのですが img タグに変換すらされていないので VSCode と同じく構文的に改行を許していないようです

まとめ

marked が柔軟で使いやすいです
VSCode のパーサは調べてみたところ markdown-it が使われてるようです
ちなみに JavaScript の markdown パーサは⇩のものなどが有名らしいです

• CommonMark
• Marked
• markdown-it
• remarkable
• Showdown
  

markdown 記法で base64 中に改行を書けないのが多いのが残念です
img タグだと使いまわしできないので書けたほうが助かるのですけどね

〇〇です

![image1]

✕✕です

![image2]

〇〇です

![image1]

<!-- references -->
[image1]: data:image/png;base64,aaaaaaaaaa
[image2]: data:image/png;base64,bbbbbbbbbb

画像だと同じ画像を毎回その場に埋め込むとけっこう重くなってしまいますから 一度どこかに定義してあとは参照とすると見やすくもなります

markdown パーサでもいろいろ違いがあるので 別環境ではちゃんと表示されないことも多いのですよねー