This page demonstrates the location option for the rehype-color-chips plugin. The left column shows color chips positioned after the color text (default), while the right column shows them positioned before.
Test various color formats supported by the plugin.
Here's a nice blue color: #3498db and a red one: #e74c3c
Short form colors work too: #f00 for red, #0f0 for green, and #00f for blue
Semi-transparent colors: #ef3c and #0f08
Full alpha channel: #0000ffcc and #ff0000aa
Standard RGB: rgb(255, 34, 0) and rgb(46, 204, 113)
With transparency: rgba(24, 213, 78, 0.4) and rgba(231, 76, 60, 0.8)
CSS named colors work great: tomato, cornflowerblue, mediumseagreen, rebeccapurple
You can use colors inline with text, like "the primary color is #2c3e50 and the secondary is #16a085" in a sentence.
#gggggg, rgb(300, 400, 500), notacolorinline code blocks get the treatment!Test various color formats supported by the plugin.
Here's a nice blue color: #3498db and a red one: #e74c3c
Short form colors work too: #f00 for red, #0f0 for green, and #00f for blue
Semi-transparent colors: #ef3c and #0f08
Full alpha channel: #0000ffcc and #ff0000aa
Standard RGB: rgb(255, 34, 0) and rgb(46, 204, 113)
With transparency: rgba(24, 213, 78, 0.4) and rgba(231, 76, 60, 0.8)
CSS named colors work great: tomato, cornflowerblue, mediumseagreen, rebeccapurple
You can use colors inline with text, like "the primary color is #2c3e50 and the secondary is #16a085" in a sentence.
#gggggg, rgb(300, 400, 500), notacolorinline code blocks get the treatment!