LoveIt/exampleSite/content/posts/theme-documentation-built-in-shortcodes.en.md

weight	title	subtitle	date	lastmod	draft	author	authorLink	description	license	tags	categories	hiddenFromHomePage	featuredImage	featuredImagePreview	toc	autoCollapseToc	math	mapbox	lightgallery	linkToMarkdown	share	comment
3	Theme Documentation - Built-in Shortcodes		2020-03-04T16:29:41+08:00	2020-03-04T16:29:41+08:00	false	Dillon	https://dillonzq.com	Hugo provides multiple built-in shortcodes for author convenience and to keep your markdown content clean.		shortcodes	documentation	false	/images/theme-documentation-built-in-shortcodes/featured-image.png		true	true	false	accessToken lightStyle darkStyle navigation geolocate scale fullscreen true true true true	true	true	enable true	true

Hugo provides multiple built-in shortcodes for author convenience and to keep your markdown content clean.

Hugo uses Markdown for its simple content format. However, there are a lot of things that Markdown doesn’t support well. You could use pure HTML to expand possibilities.

But this happens to be a bad idea. Everyone uses Markdown because it’s pure and simple to read even non-rendered. You should avoid HTML to keep it as simple as possible.

To avoid this limitations, Hugo created shortcodes. A shortcode is a simple snippet that can generate reasonable HTML code and conforms to Markdown's design philosophy.

Hugo ships with a set of predefined shortcodes that represent very common usage. These shortcodes are provided for author convenience and to keep your markdown content clean.

figure

Documentation of figure

Example figure input:

{{</* figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" */>}}

The rendered output looks like this:

{{< figure src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg" title="Lighthouse (figure)" >}}

The HTML looks like this:

<figure>
    <img src="/images/theme-documentation-built-in-shortcodes/lighthouse.jpg"/>
    <figcaption>
        <h4>Lighthouse (figure)</h4>
    </figcaption>
</figure>

gist

Documentation of gist

Example gist input:

{{</* gist spf13 7896402 */>}}

The rendered output looks like this:

{{< gist spf13 7896402 >}}

The HTML looks like this:

<script type="application/javascript" src="https://gist.github.com/spf13/7896402.js"></script>

highlight

Documentation of highlight

Example highlight input:

{{</* highlight html */>}}
<section id="main">
    <div>
        <h1 id="title">{{ .Title }}</h1>
        {{ range .Pages }}
            {{ .Render "summary"}}
        {{ end }}
    </div>
</section>
{{</* /highlight */>}}

The rendered output looks like this:

{{< highlight html >}}

{{ .Title }}

{{ range .Pages }} {{ .Render "summary"}} {{ end }}

{{< /highlight >}}

instagram

Documentation of instagram

Example instagram input:

{{</* instagram BWNjjyYFxVx hidecaption */>}}

The rendered output looks like this:

{{< instagram BWNjjyYFxVx hidecaption >}}

param

Documentation of param

Example param input:

{{</* param description */>}}

The rendered output looks like this:

{{< param description >}}

ref and relref

Documentation of ref and relref

tweet

Documentation of tweet

Example tweet input:

{{</* tweet 877500564405444608 */>}}

The rendered output looks like this:

{{< tweet 877500564405444608 >}}

vimeo

Documentation of vimeo

Example vimeo input:

{{</* vimeo 146022717 */>}}

The rendered output looks like this:

{{< vimeo 146022717 >}}

youtube

Documentation of youtube

Example youtube input:

{{</* youtube w7Ft2ymGmfc */>}}

The rendered output looks like this:

{{< youtube w7Ft2ymGmfc >}}