Theme Documentation - Extended Shortcodes
KeepIt theme provides multiple shortcodes on top of built-in ones in Hugo.
1 style
style
shortcode.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:
|
|
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 HTMLa
tag, which will be shown when hovering on the link.class [optional]
class
attribute of the HTMLa
tag.rel [optional]
Additional
rel
attributes of the HTMLa
tag.
Example link
input:
|
|
The rendered output looks like this:
Example link
input with a title:
|
|
The rendered output looks like this (hover over the link, there should be a tooltip):
Upstage3 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 HTMLfigure
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 HTMLa
tag, if linked parameter is set totrue
.
Example image
input:
|
|
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 isnote
.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:
|
|
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:
|
|
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:
|
|
The rendered output looks like this:
Inline Formula:
Block Formula:
Raw content using Markdown syntax: