警告、成功和信息块

[2TapPrince]

您好，

我正在寻找一个用于通知块的插件或 Markdown 扩展。Bootstrap 有类似的功能

如果有一个插件，我将不胜感激。

[simonk (Simon King)]

您可以使用 通用 bbcode 包装器支持，类似这样：

[wrap=success]
**成功！** 您的消息已成功发送
[/wrap]

…它将变成这个 HTML：

<div class="d-wrap" data-wrap="success" dir="ltr">
  <p><strong>成功！</strong> 您的消息已成功发送</p>
</div>

您可以添加 CSS 来定位 .d-wrap[data-wrap="success"] 来对其进行样式设置。

我使用了这个：

@mixin admonition($color, $bgcolor, $bordercolor, $iconurl) {
    padding: 8px;
    padding-left: 4em;
    padding-right: 2em;
    color: $color;
    border-left: 5px solid $bordercolor;
    background-color: $bgcolor;
    background-image: url($iconurl);
    background-repeat: no-repeat;
    background-size: 2em;
    background-position: 1em 1.25em;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2);
    margin-bottom: 1em;
}

.d-wrap[data-wrap="info"] {
    @include admonition(#084298, #cfe2ff, #b6d4fe, "/images/emoji/google/information_source.png");
}

.d-wrap[data-wrap="warning"] {
    @include admonition(#664d03, #fff3cd, #ffecb5, "/images/emoji/google/warning.png");
}

.d-wrap[data-wrap="danger"] {
    @include admonition(#842029, #f8d7da, #f5c2c7, "/images/emoji/google/stop_sign.png");
}

…这使我能够创建类似这样的内容：

[2TapPrince]

太棒了，非常感谢！

[2TapPrince]

我尝试添加了这个，我遗漏了什么吗？

[simonk (Simon King)]

我的 CSS 只为 info、warning 和 danger 添加了样式。尝试将 [wrap=success] 更改为 [wrap=warning]。

您必须为 success 定义自己的样式。

[2TapPrince]

哦，对了，我以为你把它写成了即插即用。

完美运行。