Jewel

🐺 Jewel: Show a gem of color

I found this post¹ 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:`² 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