我前段时间添加了此功能，但意识到我尚未发布相关说明。现在，您可以在 Markdown 中使用特殊语法，使其在主题组件中直接可用，而无需编写插件。
// 包裹在 div.d-wrap 中
[wrap=baz foo=bar]内容[/wrap]
// 包裹在 div.d-wrap 中
[wrap=baz foo=bar]
内容
[/wrap]
// 包裹在 div.d-wrap 中
[wrap=baz foo=bar]
[/wrap]
// 此项将渲染为 span.d-wrap 而非 div.d-wrap
a [wrap=baz]内容[/wrap] b
组件名称将作为数据属性添加：data-wrap="baz"，每个属性也将作为元素上的数据属性：data-foo="bar"。
如果您想了解实际应用场景，请参阅：
你好，Joffrey，
感谢你在那个主题中提出这个功能建议。
我很兴奋想尝试使用它，看看是否适用于我的情况，但我遇到了一个问题。
它似乎忽略了属性名中包含多个连字符的情况，并默认只选取最后一个连字符之后的字符。
我使用的是 v2.4.0.beta2 +33，如果此问题在之后的提交中已被修复，我表示歉意。
示例：
// 没有多个连字符时，这可以正常工作：data-bloodmallet="chart"。
[wrap=test bloodmallet=chart]内容[/wrap]
// 这种方式会从属性名中省略“user”，输出为 data-id="1"，而不是 data-user-id="1"。
[wrap=test2 user-id=1]内容[/wrap]
以下请求是可选的：是否有办法不在 div 内部用 <p> 标签包裹内容？
感谢提供这个功能，希望我能用它来解决我的问题！
我可以修复第一个问题
我刚刚为此推送了一个修复，细微的差别是我不再支持 foo-bar，而是支持 fooBar。因此，你现在可以这样写：
[wrap=foo userId=1]
[/wrap]
你将得到：
<div data-wrap="foo" data-user-id="1">
</div>
你好 @j.jaffeux
感谢这个功能！你知道如何为类似以下内容添加功能吗？
<button class="snipcart-add-item" data-item-id="product-1" data-item-url="/" data-item-name="Product #1" data-item-price="10.99">
加入购物车
</button>
在主题中。一般来说，如何白名单化以下内容：
class="snipcart-add-item" data-item-id="product-1"
您需要像我们在示例中那样，在主题组件中装饰您的包装：discourse-placeholder-theme-component/javascripts/discourse/initializers/setup.js at main · discourse/discourse-placeholder-theme-component · GitHub
@j.jaffeux 谢谢你的精彩建议！
最近，我们通过以下方式扩展了对通用组件的支持：
```customblock param=1
```
这将转换为：
<pre data-code-param="1" data-code-wrap="customblock"><code></code></pre>
因此，您可以将 data-code-wrap 用作组件来确定特殊处理，并且禁用语法高亮显示。
我们在这里使用了这个模式：
这是一个官方的 mermaid 主题组件。