如何在CommonMark (MarkDown)中使用图片标记？

Question

我在我的PHP项目中使用普普通通来使用MarkDown。我想在我的项目中使用WEBP，但是有些浏览器不支持它，所以我想使用<picture>标记来同时使用WEBP和JPG格式。

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

我如何在CommonMark中使用这个？

Answer 1

它花了一点时间，但我做了一个扩展。我必须弄清楚联盟/公益性中的扩展是如何工作的，所以如果缺少一些特性，或者它是否工作得很好，请耐心等待。

你可以用

composer require n0sz/commonmark-picture-extension

用法：

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());

语法

减价：

[[[
+ 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>

请随意投稿：GitHub