Skip to main content
  1. Snippits & Exemplars/
  2. WolfspyreLabs Exemplars/
  3. WolfspyreLabs Shortcodes/

Jewel

🐺 Jewel
Show a gem of color

I found this post1 on how to make a shortcode which shows a given color. I’ve re-implemented it in two different ways.
The first is the shortcode color, which creates a small code+span element like this:
<code><span>some color-styled text here</span></code>

This shortcode, jewel has a bit more flexibility. I’ve re-implemented it in two different ways. The first is the shortcode color:

🎨

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
2 displaytext inside The text within the span element. Defaults to the value passed to the color parameter
🎨

Positional usage #

🎨
{{< jewel “green” >}}
Should display the specified color :
green
{{< jewel “green” “not green” >}}
Display the color with the specified text overlayed:
not green
{{< jewel “green” “before green” “before” >}}
Display the color with the specified text preceeding:
before green before green
{{< jewel “green” “after green” “after” >}}
Display the color and then the text:
after green after green
{{< jewel “green” “not green” “none” >}}
Display the color without the text:
green
{{< jewel “green” "" "" >}}
Display the color without the text:
green

Named Parameter usage #

🎨
{{< jewel color=“blue” >}}
Should display the specified color :
blue
{{< jewel color=“blue” colortext=“not blue” >}}
Display the color with the specified text overlayed:
not blue
{{< jewel color=“blue” colortext=“before blue” displaytext=“before” >}}
Display the color with the specified text preceeding:
before blue before blue
{{< jewel color=“blue” colortext=“after blue” displaytext=“after” >}}
Display the color and then the text:
after blue after blue
{{< jewel color=“blue” colortext=“no blue” displaytext=“none” >}}
Display the color without the text:
blue
{{< jewel color=“blue” colortext=“blue” displaytext="" >}}
Display the color without the text:
blue

This is managed by the file layouts/shortcodes/color.html

There is also the color variant of this shortcode.
That’s managed through the file layouts/shortcodes/jewel.html