HUGO

Pride shortcode

This is a quick tip on how to apply a “pride” font color on to text in your hugo sites. The shortcode will apply a rainbow font color on to the specified text. You can see a sample of that here:

pride_example

In order to accomplish this, you will need to create a pride.html shortcode file in the \layouts\shortcodes\ directory.

The contents of pride.html are:

<style>
    .multicolortext {
        background-image: linear-gradient(to right, #e40303, #ff8c00, #ffed00, #008026, #004dff, #750787);
        -webkit-background-clip: text;
        -moz-background-clip: text;
        background-clip: text;
        color: transparent;
    }
</style>

<span class="multicolortext">{{ .Inner }}</span>

In your markdown pages, you then use this shortcode as:

{{< pride >}}YOUR TEXT HERE{{< /pride >}}

Happy Pride!

9 Likes

Happy Pride!
Tnks for the tip.