Theme Documentation - Extended Shortcodes

KeepIt theme provides multiple shortcodes on top of built-in ones in Hugo.

1 style

style is a shortcode to insert custom style in your post.

The style shortcode has two positional parameters.

The first one is the custom style content, which supports nesting syntax in  SASS and & referring to this parent HTML element.

And the second one is the tag name of the HTML element wrapping the content you want to change style, and whose default value is div.

Example style input:

1
2
3

{{< style "text-align:right; strong{color:#00b1ff;}" >}}
This is a **right-aligned** paragraph.
{{< /style >}}

The rendered output looks like this:

2 link

link shortcode is an alternative to Markdown link syntax . link shortcode can provide some other features and can be used in code blocks.

The complete usage of local resource references is supported.

The link shortcode has the following named parameters:

• href [required] (first positional parameter)

  Destination of the link.

• content [optional] (second positional parameter)

  Content of the link, default value is the value of href parameter.

  Markdown or HTML format is supported.

• title [optional] (third positional parameter)

  title attribute of the HTML a tag, which will be shown when hovering on the link.

• class [optional]

  class attribute of the HTML a tag.

• rel [optional]

  Additional rel attributes of the HTML a tag.

Example link input:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{{< link "https://assemble.io" >}}
Or
{{< link href="https://assemble.io" >}}

{{< link "mailto:contact@revolunet.com" >}}
Or
{{< link href="mailto:contact@revolunet.com" >}}

{{< link "https://assemble.io" Assemble >}}
Or
{{< link href="https://assemble.io" content=Assemble >}}

The rendered output looks like this:

• https://assemble.io
• mailto:contact@revolunet.com
• Assemble

Example link input with a title:

1
2
3

{{< link "https://github.com/upstage/" Upstage "Visit Upstage!" >}}
Or
{{< link href="https://github.com/upstage/" content=Upstage title="Visit Upstage!" >}}

The rendered output looks like this (hover over the link, there should be a tooltip):

3 image

image shortcode is an alternative to figure shortcode . image shortcode can take full advantage of the dependent libraries of lazysizes and lightGallery .

The complete usage of local resource references is supported.

The image shortcode has the following named parameters:

• src [required] (first positional parameter)

  URL of the image to be displayed.

• alt [optional] (second positional parameter)

  Alternate text for the image if the image cannot be displayed, default value is the value of src parameter.

  Markdown or HTML format is supported.

• caption [optional] (third positional parameter)

  Image caption.

  Markdown or HTML format is supported.

• title [optional]

  Image title that will be shown when hovering on the image.

• class [optional]

  class attribute of the HTML figure tag.

• src_s [optional]

  URL of the image thumbnail, used for lightgallery, default value is the value of src parameter.

• src_l [optional]

  URL of the HD image, used for lightgallery, default value is the value of src parameter.

• height [optional]

  height attribute of the image.

• width [optional]

  width attribute of the image.

• linked [optional]

  Whether the image needs to be hyperlinked, default value is true.

• rel [optional]

  Additional rel attributes of the HTML a tag, if linked parameter is set to true.

Example image input:

1

{{< image src="/images/lighthouse.jpg" caption="Lighthouse (`image`)" src_s="/images/lighthouse-small.jpg" src_l="/images/lighthouse-large.jpg" >}}

The rendered output looks like this:

4 admonition

The admonition shortcode supports 12 types of banners to help you put notice in your page.

Markdown or HTML format in the content is supported.

The admonition shortcode has the following named parameters:

• type [optional] (first positional parameter)

  Type of the admonition banner, default value is note.

• title [optional] (second positional parameter)

  Title of the admonition banner, default value is the value of type parameter.

• open [optional] (third positional parameter)

  Whether the content will be expandable by default, default value is true.

Example admonition input:

1
2
3
4
5
6
7

{{< admonition type=tip title="This is a tip" open=false >}}
A **tip** banner
{{< /admonition >}}
Or
{{< admonition tip "This is a tip" false >}}
A **tip** banner
{{< /admonition >}}

The rendered output looks like this:

5 mermaid

The mermaid shortcode supports diagrams in Hugo with Mermaid library.

The full documentation is provided in Theme Documentation - mermaid Shortcode .

6 echarts

The echarts shortcode supports data visualization in Hugo with ECharts library.

The full documentation is provided in Theme Documentation - echarts Shortcode .

7 mapbox

The mapbox shortcode supports interactive maps in Hugo with Mapbox GL JS library.

The full documentation is provided in Theme Documentation - mapbox Shortcode .

8 music

The music shortcode embeds a responsive music player based on APlayer and MetingJS library.

The full documentation is provided in Theme Documentation - music Shortcode .

9 bilibili

The bilibili shortcode embeds a responsive video player for bilibili videos.

The full documentation is provided in Theme Documentation - bilibili Shortcode .

10 typeit

The typeit shortcode provides typing animation based on TypeIt library.

The full documentation is provided in Theme Documentation - typeit Shortcode .

11 script

script is a shortcode to insert custom  Javascript in your post.

Example script input:

1
2
3

{{< script >}}
console.log('Hello KeepIt!');
{{< /script >}}

You can see the output in the console of the developer tool.

12 raw

raw is a shortcode to insert raw  HTML content in your post. This is useful when you want to include some Markdown content to avoid being rendered or escaped by Hugo.

Example raw input:

1
2
3
4
5
6
7
8
9

Inline Formula: {{< raw >}}\(\mathbf{E}=\sum_{i} \mathbf{E}_{i}=\mathbf{E}_{1}+\mathbf{E}_{2}+\mathbf{E}_{3}+\cdots\){{< /raw >}}

Block Formula:

{{< raw >}}
\[ a=b+c \\ d+e=f \]
{{< /raw >}}

Raw content using Markdown syntax: {{< raw >}}**Hello**{{< /raw >}}

The rendered output looks like this:

Inline Formula:

Block Formula:

Raw content using Markdown syntax: