我前段时间添加了此功能，但意识到我尚未发布相关说明。现在，您可以在 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"。
如果您想了解实际应用场景，请参阅：
Hello Joffrey,
Thanks for suggesting this feature in the other topic.
I was excited to try to use it and see if it worked for my case, however I encountered a problem.
It seems to ignore attribute names that has multiple hyphens in between and defaults to only pick the characters after the last hyphen.
I am using v2.4.0.beta2 +33, I apologize if this has been fixed in a newer commit since.
Examples:
// No multiple hyphen this works fine: data-bloodmallet="chart".
[wrap=test bloodmallet=chart]Content[/wrap]
// This way it omits "user" from the attribute name and output is data-id="1" instead of data-user-id="1".
[wrap=test2 user-id=1]Content[/wrap]
This following request is optional: Is there a way to not wrap the content inside the div with <p> tag?
Thanks for this feature and hopefully I can use it to fix my problem!
I can fix the first issue
I just pushed a fix for this, slight difference is that I won’t support foo-bar but fooBar. So you can now write:
[wrap=foo userId=1]
[/wrap]
And you will get:
<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 主题组件。