Docs

Mark

Posted on December 29, 2023  (Last modified on June 7, 2025) • 2 min read • 341 words
Component  
Component  
Share via

Use the mark shortcode to highlight text.

Overview   Arguments   Examples  

Overview  

Added in v0.19.0   

Use the mark shortcode to highlight text. The inner content is used as input.

Use the mark shortcode to highlight specific text.
markdown 
Use the mark shortcode to {{< mark >}}highlight{{< /mark >}} specific text.

Arguments  

The shortcode supports the following arguments:

Name Type Required Default Comment
class string Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
color select Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].
Name Type Required Default
class string
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
color select
Theme color of the element. Supported values: [primary, secondary, success, danger, warning, info, light, dark, white, black, body, body-tertiary].

Examples  

Specify a theme color to define the background color of the highlighted text. As an example, the following shortcodes display a highlight for each theme color.

  • Use the mark shortcode to highlight specific text.
  • Use the mark shortcode to highlight specific text.
  • Use the mark shortcode to highlight specific text.
  • Use the mark shortcode to highlight specific text.
  • Use the mark shortcode to highlight specific text.
  • Use the mark shortcode to highlight specific text.
  • Use the mark shortcode to highlight specific text.
  • Use the mark shortcode to highlight specific text.
markdown 
- Use the mark shortcode to {{< mark color="primary" >}}highlight{{< /mark >}} specific text.
- Use the mark shortcode to {{< mark color="secondary" >}}highlight{{< /mark >}} specific text.
- Use the mark shortcode to {{< mark color="success" >}}highlight{{< /mark >}} specific text.
- Use the mark shortcode to {{< mark color="danger" >}}highlight{{< /mark >}} specific text.
- Use the mark shortcode to {{< mark color="warning" >}}highlight{{< /mark >}} specific text.
- Use the mark shortcode to {{< mark color="info" >}}highlight{{< /mark >}} specific text.
- Use the mark shortcode to {{< mark color="light" >}}highlight{{< /mark >}} specific text.
- Use the mark shortcode to {{< mark color="dark" >}}highlight{{< /mark >}} specific text.
On this page: