How do I display colorized html text in Markdown card?

Configuration Frontend
1

I am trying to display colorized text in Markdown card. However, color is being ignored for some reason. I’d expect color text to be a fundamental feature… maybe I’m doing something wrong?

type: markdown
title: "Color Test"
content: |
  <span style="color: red;">This is red text.</span>
  <br>
  <span style="color: blue;">This is blue text.</span>
  <br>
  <span style="color: green;">This is green text.</span>
  <br>
  <span style="color: yellow;">This is yellow text.</span>
2

You may be want to take a look at the HACS integration GitHub - PiotrMachowski/Home-Assistant-Lovelace-HTML-Jinja2-Template-card: This card displays provided Jinja2 template as an HTML content of a card. It uses exactly the same engine as Home Assistant in Developer tools.

3

Does anyone know a WORKING way to colorize a text?

This does not work (as was already said):

type: markdown
title: "Color Test"
content: |
  <span style="color: red;">This is red text.</span>

This does work:

content: |
  <font color=red>This is red text.</font>

but “font” is considered as deprecated; also it does not process CSS color vars properly - see this issue (had to close it since “font” is deprecated):

content: |
  <font color=var(--red-color)>This is red text.</font>

изображение
изображение965×214 12.3 KB

Internet is full of copy/pasted “solutions” which in fact may not work.

P.S. Please do not suggest card-mod.