Docs

Abbr

Posted on January 16, 2025  (Last modified on June 15, 2025) • 2 min read • 349 words
Component  
Component  
Share via

Use the abbr shortcode to show the long form of an abbreviation.

Overview   Arguments   Data Format  

Overview  

Added in v0.19.0   

Use the abbr shortcode to show the long form of an abbreviation on hover. The abbreviation data is retrieved from a central data file. By default, the shortcode uses data/abbr.yaml with translation support.

HTML html
markdown 
{{< abbr HTML >}}
{{< abbr key="html" class="initialism" >}}

Arguments  

The shortcode supports a single unnamed argument, which maps to the key argument. When using named parameters, the following arguments are supported:

Name Type Required Default Comment
class string Class attribute of the abbr element. For example, specify initialism for a slightly smaller font size.
data string abbr Filename of the abbrevation input. You can omit the file extension. The file should reside in the data folder. The data supports language extensions. For example, abbr.en.yaml refers to the English translation of the abbrevation data. The filename abbr.yaml is used when no suitable translation is found.
key string yes Case-insensitive key of the abbreviation. In shorthand notation, this is the first (and only) matched argument. Non-alphanumeric keys must be quoted.
Name Type Required Default
class string
Class attribute of the abbr element. For example, specify initialism for a slightly smaller font size.
data string abbr
Filename of the abbrevation input. You can omit the file extension. The file should reside in the data folder. The data supports language extensions. For example, abbr.en.yaml refers to the English translation of the abbrevation data. The filename abbr.yaml is used when no suitable translation is found.
key string yes
Case-insensitive key of the abbreviation. In shorthand notation, this is the first (and only) matched argument. Non-alphanumeric keys must be quoted.

Data Format  

Define a file in the data folder that contains the abbreviation data. The format expects the following attributes:

Attribute Required Description
id Yes Required key of the abbeviation. Store the key in lower case to ensure it can be matched.
long Yes Required long form of the abbreviation.

The following snippet defines three entries in yml format.

- id: css
  long: "Cascading Style Sheets"

- id: html
  long: "HyperText Markup Language"

- id: svg
  long: "Scalable Vector Graphics"
On this page: