mosra / m.css

A no-nonsense, no-JavaScript CSS framework, site and documentation theme for content-oriented websites
https://mcss.mosra.cz
MIT License
399 stars 88 forks source link

How to colorized a word or sentence. #246

Closed egberts closed 5 days ago

egberts commented 1 week ago

Maybe I am stupid, but I've tried to colorized the text using <span style color:red>Red text</span> but no dice:

Using this example Markdown file:

Throughout the following sections note:

* <span style="color:red;">Red text</span> indicates deprecated macros ...

* <span style="color:green;">Green text</span> indicates recommended macros ...

and it produces ... no change.

Firefox Inspector reported:

<span style="">Red text</span> indicates deprecated macros ...
<span style="">Green text</span> indicates recommended macros ...

Reference: https://egbert.net/blog/articles/detect-os-using-compiler-predefined-macros.html

So, is there some CSS I must use to support my goal of colorizing a text string in HTML? Or something simpler?

(BTW, who stripped my style="" options off?

egberts commented 1 week ago

Could it be that I too must have a supporting CSS and do the following?

Html:

<p>For example different coloured 
in-line <code class="red">code 
in red</code> and 
<code class="green">green</code>.</p>

Along with the following css in main.css.

code.red {color:red;}
code.green {color: green;}

Is that a viable solution, if so, where would I put my customized CSS amongst the many m.css files?

mosra commented 1 week ago

For colored text, there's the pre-defined CSS styles shown at https://mcss.mosra.cz/css/components/#text It's not red red, but pretty close, and as a bonus you have a chance to tune the colors for your theme without having to update all cases where they're used.

So in case of Markdown it'd be <span class="m-text m-danger">text in red</span>, I think? No idea what the Markdown processor is capable of, again, so maybe you'd have to try a bunch of variants before it sticks.

For reST you'd do

.. defined at the top
.. role:: text-danger
    :class: m-text m-danger

...

This is a :text-danger:`red text`.