README

⚠️ 该包已被放弃。请使用 sven/commonmark-image-media-queries ⚠️

此 CommonMark 扩展允许您确定在Markdown中使用CommonMark转换时，在暗色或亮色模式下显示哪些图片。

安装

通过 composer

composer require sven/commonmark-dark-mode-images

使用方法

要启用扩展，首先确保与CommonMark一起提供的 Attributes 扩展 已启用。然后，将扩展添加到CommonMark环境中

use Sven\CommonMark\DarkModeImages\DarkModeImagesExtension;

$environment->addExtension(new DarkModeImagesExtension());

您需要将一些类应用到Markdown图片上，以指示该扩展应进行转换

![Screenshot of a settings dialog](/images/settings-light.jpg){.light-image}
![dark](/images/settings-dark.jpg){.dark-image}

这些 {.light-image} 和 {.dark-image} 标签是 Attributes 扩展 的部分。它们应用于转换后的 <img> 元素，该扩展使用这些元素来执行其魔法。生成的HTML将类似于以下内容

<picture class="dark-mode-images-picture">
    <source srcset="/images/settings-dark.jpg" media="(prefers-color-scheme: dark)" />
    <img src="/images/settings-light.jpg" alt="Screenshot of a settings dialog"/>
</picture>

并在浏览器中的结果

配置

回退或原始

此选项允许您选择 'light' 或 'dark' 作为嵌入图片的“原始”形式。这决定了如果浏览器不支持 <picture> 元素时将使用哪个图片。

use League\CommonMark\Environment\Environment;
use Sven\CommonMark\DarkModeImages\DarkModeImagesExtension;

$environment = new Environment([
    'dark_mode_images' => [
        'fallback' => 'dark', // Default: 'light'.
    ],
]);

$environment->addExtension(new DarkModeImagesExtension());

<picture> 元素上的类

要更改最终应用于渲染的 <picture> 元素的类，请使用 picture_class 配置选项

use League\CommonMark\Environment\Environment;
use Sven\CommonMark\DarkModeImages\DarkModeImagesExtension;

$environment = new Environment([
    'dark_mode_images' => [
        'picture_class' => '<your class here>', // Default: 'dark-mode-images-picture'.
    ],
]);

$environment->addExtension(new DarkModeImagesExtension());

亮色和暗色类

使用 dark_image_class 和 light_image_class 配置选项来确定应用于Markdown图片的类，以指示哪个用于暗色模式，哪个用于亮色模式。

use League\CommonMark\Environment\Environment;
use Sven\CommonMark\DarkModeImages\DarkModeImagesExtension;

$environment = new Environment([
    'dark_mode_images' => [
        'light_image_class' => 'l', // Default: 'light-image'.
        'dark_image_class' => 'd', // Default: 'dark-image'.
    ],
]);

$environment->addExtension(new DarkModeImagesExtension());

注意

不建议在每次请求时动态转换Markdown时使用此扩展。这最适合用于像 Jigsaw 这样的静态站点生成器。

贡献

所有贡献（拉取请求、问题和功能请求）都受欢迎。不过，请先阅读CONTRIBUTING.md。有关所有贡献者的信息，请参阅贡献者页面。

许可证

sven/commonmark-dark-mode-images 采用MIT许可证（MIT）授权。有关更多信息，请参阅许可证文件。