The WolfspyreLabs Blog/ Snippits & Exemplars/ WolfspyreLabs Exemplars/ WolfspyreLabs Shortcodes/ Color/ 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 https://pranshugaba.com/dev/hugo-colour-shortcode/ ↩︎ https://developer.mozilla.org/en-US/docs/Web/CSS/color ↩︎