How can I use picture tag in CommonMark (MarkDown)?

Question

I use commonmark to use MarkDown in my PHP project. I want to use WEBP in my project but some browsers not support it, so I want to use <picture> tag to use both WEBP and JPG formats.

<picture>
  <source type="image/webp" srcset="flower.webp">
  <source type="image/jpeg" srcset="flower.jpg">
  <img src="flower.jpg" alt="">
</picture>

How can I use this in CommonMark?

Answer 1

It took a bit but I made an Extension. I had to figure out how extensions in league/commonmark work so be patient if some features are missing or if it is not working perfectly.

You can install it with

composer require n0sz/commonmark-picture-extension

Usage:

use League\CommonMark\Environment\Environment;
use League\CommonMark\Extension\CommonMark\CommonMarkCoreExtension;
use N0sz\CommonMark\Picture\PictureExtension;

$environment = new Environment();
$environment->addExtension(new CommonMarkCoreExtension());
$environment->addExtension(new PictureExtension());

Syntax

Markdown:

[[[
+ img_1 {media:"(min-width:650px)"}
+ img_2 {media:"(min-width:465px)"}
- img_3
]]]

Html:

<picture>
<source media="(min-width:650px)" srcset="img_1" />
<source media="(min-width:465px)" srcset="img_2" />
<img src="img_3" />
</picture>

Feel free to contribute: GitHub