I added this feature a while back and realised I didn’t post about it. You can now use a special syntax in markdown to have it cooked and usable in theme components without having to write a plugin.
```plaintext
// wrapped in div.d-wrap
[wrap=baz foo=bar]Content[/wrap]
// wrapped in div.d-wrap
[wrap=baz foo=bar]
Content
[/wrap]
// wrapped in div.d-wrap
[wrap=baz foo=bar]
[/wrap]
// this one will be rendered as a span.d-wrap instead of a div.d-wrap
a [wrap=baz]Content[/wrap] b
```
The name of the component will be added as a data-attribute: `data-wrap="baz"` and every properties will also be data-attributes: `data-foo="bar"` on the element.
If you want to read about a real world use case, see
> [@Placeholder Forms](https://meta.discourse.org/t/discourse-placeholder-theme-component/113533):
>
> discourse2Summary Placeholder Forms will let you build dynamic documentation, by creating a form that replaces any occurrence of a =PATTERN= in your post with the value from a text or selectable input field.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/placeholder-forms)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-placeholder-theme-component](https://github.com/discourse/discourse-placeholder-theme-component)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component …
---
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 `
` tag?
Thanks for this feature and hopefully I can use it to fix my problem!
---
I just pushed a fix for this, slight difference is that I won’t support foo-bar but fooBar. So you can now write:
```plaintext
[wrap=foo userId=1]
[/wrap]
```
And you will get:
```plaintext
Hi @j.jaffeux
Thanks for this feature! Do you know the best direction how to add feature for things like
```plaintext
```
in topics. And generally - to whitelist
```plaintext
class="snipcart-add-item" data-item-id="product-1"
```
Working example - [https://codepen.io/thatfrankdev/pen/xxwRXQw](https://codepen.io/thatfrankdev/pen/xxwRXQw)
---
You need to decorate your wrap in a theme component, like we do here for example: [discourse-placeholder-theme-component/javascripts/discourse/initializers/setup.js at main · discourse/discourse-placeholder-theme-component · GitHub](https://github.com/discourse/discourse-placeholder-theme-component/blob/main/javascripts/discourse/initializers/setup.js#L107)
---
Recently we expanded this to support generic components using:
````plaintext
```customblock param=1
```
````
This will be translated to:
```plaintext
```
Thus as a component you can use `data-code-wrap` to determine special handling and syntax highlighting is disabled.
We used this pattern here:
[https://github.com/discourse/discourse-mermaid-theme-component](https://github.com/discourse/discourse-mermaid-theme-component)
Which is an official mermaid theme component.