Usage of Colour with Custom Syntax

I find using colour very important when taking notes.
To an extent using css to colour bold or italic text helps with the matter but that is limited to only two colours.
Then I started using different headers, made 4 of them the same size and different colour using css, but that only further adds another 4 colours, is still very limited, and honestly just a workaround.

I’d love a feature which would allow me to do something like this:
red$Red text$

A syntax which would allow one to pick a colour using a letter, word or rgb value at the beginning of it, and which would then colour the text inside of the dollar signs in that colour. This is merely an example and I’m sure there are better solutions to this if such a feature is even possible.

5 Likes

Right now, you can sorta accomplish this with your own HTML and CSS. The key problem with this would be that markdown isn’t rendered inside a manually-inserted HTML block.

For example:

<span style=“color: red;”>Some text</span>
<span style=“color: green;”>Some other text</span>

…would turn the two lines red and green (if I have my CSS syntax correct).

1 Like

I find it easier to use

<font color="red">text</font>

Works for size and font family too.

4 Likes

The HTML suggestions above can be made a little easier with a text expander, such as Espanso. It allows you to configure where your cursor is placed after the expansion which is very helpful for these examples.

See the “cursor hints” in their docs here: https://espanso.org/docs/matches/#cursor-hints

3 Likes

Thanks for the great suggestions lads.
I made an espanso script that does just that:

1 Like

Existing markup syntax for adding metadata/attributes (id, color, …) to span elements: