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. A sample would look like this:

And what could be more beautiful than love?

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 would be:

<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! ❤️