How to use both <div> and link with data-theme features

Product Support

AI-generated summary

IKab seeks a way to use both <div> elements and markdown links with data-attributes in Discourse, noting that direct <a> tags block data attributes and markdown doesn’t render inside <div>s. pfaffman suggests using [wrap], while Firepup650 proposes placing markdown links either on the same line as the opening <div> or after a gap inside the <div> — both methods successfully render the link. IKab confirms both solutions work. This thread offers practical workarounds for combining HTML structure with markdown functionality in Discourse.

1

It’s said in this post on customizing personal styles that it’s not possible to use an <a> link tag directly because it’s an exception and doesn’t allow any data-attributes.
The solution is to use a Markdown [link] to enable the use of attributes, just like this :

Code :

This <span data-button>[link](https://discourse.org/)</span> use Mardown !

Result :

This link use Mardown !

However, for the structure of this specific post (and even for the all discourse), I need to use <div> in html for ease of use, but this seems to prevent any BBCode or markdown from being corectively interpreted. So using markdown links doesn’t work directly in a div.

Code :

<div>
This <span data-button>[link](https://discourse.org/)</span> use Mardown in a div !
</div>

Result :

This [link](https://discourse.org/) use Mardown in a div !

I find myself unable to use <a> tags, which prevent data-atributes, and unable to use markdown or BBCode, which only work outside divs.

Can anyone suggest a solution ? Thank you so much.

2

Have a look at [wrap] like in Placeholder Forms, maybe?

3

I think if you have anything on the line with the opening div you should be fine, e.g.:

This is some text <div>
This is a very cool [link](https://example.com)!
</div>

Becomes:

Or even a gapped div should work:

This is some text
<div>

This is a very cool [link](https://example.com)!
</div>

Becomes:

4

YES ! Thank you , the 2 methods work very well !