Mix HTML into a Markdown card

Developer help
1

Is it normal that it doesn’t seem possible to mix HTML into a Markdown card?

I’m currently looking for a way for normal users to be able to edit the text on a specially formatted page, without knowing too much HTML.

So I was thinking of using a Markdown card which offers a little WYSIWYG (bold, italic and other links) and inserting a little HTML to mark certain sections, but obviously that doesn’t seem to work.

Someone would have any idea? Or do I have no choice but to use an HTML card and tell my users to use HTML tags? :thinking:

<div class="myclass">
    <p>It doesn't seem possible to mix **Markdown** and HTML, to allow the user to set CSS classes on elements.</p>
</div>

**OUTSIDE**

image
image842×227 9.09 KB

image
image
image765×173 6.33 KB

Thanks!

2

One option I’ve used is to save a snippet with the opening and closing div (including my class), then have the user wrap them around the material to be selected/styled. That reduces the amount of HTML the user needs to write to basically zero, and in fact, you wouldn’t need markdown in your simple example, either.

3

Markdown typically requires blank lines around HTML block elements and markdown to differentiate between the two. Try this instead:

<div class="myclass">

This is a **markdown** paragraph inside the div.

</div>
4

Thanks, but even if it works, I feel like the risk of having bugs when mixing HTML in Markdown is too high with this solution. :confused:

Test 1

<div class="myclass">
    
It doesn't seem possible to mix **Markdown** and HTML, to allow the user to set CSS classes on elements.
    
</div>

produces indeed

<div class="myclass">
<p>It doesn't seem possible to mix <strong>Markdown</strong> and HTML, to allow the user to set CSS classes on elements.</p>
</div>

image
image696×66 2.31 KB

Test 2

But, if the user adds too many spaces before its text:

<div class="myclass">
    
     It doesn't seem possible to mix **Markdown** and HTML, to allow the user to set CSS classes on elements.
    
</div>

It would produce:

<div class="myclass">
<pre><code> It doesn't seem possible to mix **Markdown** and HTML, to allow the user to set CSS classes on elements.
</code></pre>
</div>

image
image723×96 1.93 KB

Not quite what I expected :sweat_smile:

5

Indeed, a snippet could work, but since certain elements are only likely to be found on a single page and the user is not likely to add any, it does not seem to me to be a viable option in this context.

But thanks anyway! :smiling_face_with_three_hearts: