svg/shieldTag Shortcode

Shields.io badges is one of the famously used component to display many of its cool content. Rather than depending on external server to render the badge, Bissetii’s svg/sheildTag shortcode lets you create an in-house Shields.io badge easily and hosted locally.

Example usage:

{{< svg/shieldTag "Core Language" "Hugo" "#004d40" "#ffffff" >}}

This shortcode is available starting from v1.11.0.

Heads-Up

While the shortcode is useful, it breaks the Markdown syntax conventions due to Hugo specific shortcode feature. Therefore, when using other Markdown renderer, these shortcodes would be rendered as text instead of HTML code fragments.

Also, be careful and stay safe while using this shortcode. It allows any form of HTML to be embedded into your Markdown page.

Using svg/shieldTag

The shortcode takes a number of inputs with the same order from Shields.io:

  1. badge label - the title
  2. badge value - the value
  3. background color - the HTML color hex-code for background. Use dark color.
  4. text color - [OPTIONAL] the HTML color hex-code for text. Default is white.
  5. URL - [DEPRECATED] the optional wrapping URL.

Since this is a HTML renderer in Markdown file, you want to call in the shortcode using the < symbol instead of %. The brackets are as follow:

{{< svg/shieldTag "my Title Here"
	"value" "#004d40"
	"#ffffff"
	"https://shields.io" >}}

This will render the tag as:

MY TITLE HERE
VALUE