- The WolfspyreLabs Blog/
- Snippits & Exemplars/
- WolfspyreLabs Exemplars/
- WolfspyreLabs Shortcodes/
- Color/
Color
🐺
Show a bit of color
Color
Show a bit of color
I found this post1 on how to make a shortcode which shows a given color.
It does this by creating a small code+span element:
like this: <code><span>
some color-styled text here</span></code>
I’ve re-implemented it, using spans instead.
I also altered it to consume:
Tailwind-style: color-hue/alpha
or
#0022FF
hex values.
🎨
Position | Parameter | Default | Behavior |
---|---|---|---|
0 | color |
N/A | Populates the css color: 2 attribute of the <span> element created |
1 | colortext |
color |
The text within the span element. Defaults to the value passed to the color parameter |
🎨
Positional usage #
{{﹤ color "blue" >}}
Should display the specified color
blue
{{﹤ color "blue" "not blue" >}}
Should display the color with the specified text overlayed
not blue
Named Parameter usage #
🎨
{{﹤ color color="blue" >}}
Should work as expected:
blue
{{﹤ color color="blue" colortext="not blue" >}}
Should work as expected:
not blue
🎨
This is managed by the file layouts/shortcodes/color.html
There is also the jewel variant of this shortcode.
That’s managed through the file layouts/shortcodes/jewel.html