Colour macro within a HTML element

, ,
#1

I am trying to make a card template with HTML, CSS and wiki-text which changes based on the palette, the code for it looks something along the lines like the following:

<div style="width:350px;background-color:<<colour muted-foreground>>;">
<$image source=image.png width=100% />
<center>{{!!title}}</center>
</div>

A problem that arises is that the colour macro will just be ignored by the parser and will not give the <div> a background colour. How am I able to use the macro, within a HTML elements style.

p.s - I know I shouldn’t be using style attributes inside an element but I want to write the least amount of code possible within the least amount of tiddlers possible, preferably one.

#2

Literal HTML attributes are not “wikified”, so the <<colour>> macro never get replaced by a CSS color value.

In addition, the <<colour>> macro is implemented as a series of nested transclusions, which you can see by writing <$text text=<<colour muted-foreground>>/>, which shows:

\whitespace trim
<$transclude tiddler={{$:/palette}} index="muted-foreground">
<$transclude tiddler="$:/palettes/Vanilla" index="muted-foreground">
<$transclude tiddler="$:/config/DefaultColourMappings/muted-foreground"/>
</$transclude>
</$transclude>

To get the actual CSS color value from the macro, it needs to be fully parsed (“wikified”), which happens when you use the macro within a <style>...</style> block to define a CSS classname.

Try this:

<style>.mybg { background-color:<<colour muted-foreground>> }</style>
<div style="width:350px;" class="mybg">
...

enjoy,
-e

#3

Thank you so much, it works now. I also have to note down that macro’s will not get replaced within HTML attributes as they are not wikified

#4

keep in mind, within some limitations macros can be included in filters and can often be treated as variables. As a result you can use the backticks and Substituted Attribute values, or looking at attributes in general see Widget Attributes that documents them all. Basically you can have things evaluated before the final render via functions and backticks. This includes macros with some parameters.

There is sometimes no harm in making single tiddler solutions, and many of @EricShulman’s tiddlytools do this. However learning to package multi-tiddler solution into a JSON, and ultimately a plugin are worth learning.