Using div tags to coloured notes

Features
1

Hi,

I have looked it up but I could not see anyone mentioning this feature in the forum: I'd like to use HTML div tags to create a coloured box. For example:

<div class="alert alert-block alert-warning">
<b>Example:</b> This yellow box highlights some text.
</div>

I have read that HTML code is supported so it should be easy to make these work?

Thanks!

2

Yes this will work. I put a similar header on a lot of my notes giving a summary as to what the note is about.

This Highlighter (plugin) also uses something similar to highlight specific text - https://discourse.joplinapp.org/t/plugin-highlighter/15162

3

Thanks for your response. It does not work for me currently. The text is rendered properly but I don't get the colour box.

I'd rather avoid using a plugin for what is a regular HTML feature if I can.

4

Have you actually set the colour of your alert in your CSS?

.alert {
    background: yellow;
}

Tools -> options -> appearance -> show advanced settings -> Custom stylesheet for rendered Markdown

You can also set the style in the div

<div style="background:skyblue;">text here</div>

5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.