mirror of
https://github.com/gohugoio/hugoDocs.git
synced 2025-09-10 08:04:41 -04:00
Elevate embedded shortcode documentation to its own section
This commit is contained in:
Joe Mooring
GitHub
parent
8fa19b50fa
commit
a346ca1fda
@ -55,20 +55,26 @@ identifier = 'render-hooks'
|
||||
pageRef = '/render-hooks/'
|
||||
|
||||
[[docs]]
|
||||
name = 'Hugo Modules'
|
||||
name = 'Shortcodes'
|
||||
weight = 100
|
||||
identifier = 'shortcodes'
|
||||
pageRef = '/shortcodes/'
|
||||
|
||||
[[docs]]
|
||||
name = 'Hugo Modules'
|
||||
weight = 110
|
||||
identifier = 'modules'
|
||||
pageRef = '/hugo-modules/'
|
||||
|
||||
[[docs]]
|
||||
name = 'Hugo Pipes'
|
||||
weight = 110
|
||||
weight = 120
|
||||
identifier = 'hugo-pipes'
|
||||
pageRef = '/hugo-pipes/'
|
||||
|
||||
[[docs]]
|
||||
name = 'CLI'
|
||||
weight = 120
|
||||
weight = 130
|
||||
post = 'break'
|
||||
identifier = 'commands'
|
||||
pageRef = '/commands/'
|
||||
@ -77,25 +83,25 @@ pageRef = '/commands/'
|
||||
|
||||
[[docs]]
|
||||
name = 'Troubleshooting'
|
||||
weight = 130
|
||||
weight = 140
|
||||
identifier = 'troubleshooting'
|
||||
pageRef = '/troubleshooting/'
|
||||
|
||||
[[docs]]
|
||||
name = 'Developer tools'
|
||||
weight = 140
|
||||
weight = 150
|
||||
identifier = 'developer-tools'
|
||||
pageRef = '/tools/'
|
||||
|
||||
[[docs]]
|
||||
name = 'Hosting and deployment'
|
||||
weight = 150
|
||||
weight = 160
|
||||
identifier = 'hosting-and-deployment'
|
||||
pageRef = '/hosting-and-deployment/'
|
||||
|
||||
[[docs]]
|
||||
name = 'Contribute'
|
||||
weight = 160
|
||||
weight = 170
|
||||
post = 'break'
|
||||
identifier = 'contribute'
|
||||
pageRef = '/contribute/'
|
||||
|
||||
@ -72,555 +72,7 @@ You can call shortcodes within other shortcodes by creating your own templates t
|
||||
|
||||
## Embedded shortcodes
|
||||
|
||||
Use these embedded shortcodes as needed.
|
||||
|
||||
### comment
|
||||
|
||||
{{< new-in "0.137.1" >}}
|
||||
|
||||
{{% note %}}
|
||||
To override Hugo's embedded `comment` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
|
||||
|
||||
[source code]: {{% eturl comment %}}
|
||||
{{% /note %}}
|
||||
|
||||
Use the `comment` shortcode to include comments in your Markdown. Hugo excludes the encapsulated text when rendering your site.
|
||||
|
||||
Example usage:
|
||||
|
||||
```text
|
||||
{{%/* comment */%}} TODO: rewrite the paragraph below. {{%/* /comment */%}}
|
||||
```
|
||||
|
||||
Although you can call this shortcode using the `{{</* */>}}` notation, computationally it is more efficient to call it using the `{{%/* */%}}` notation as shown above.
|
||||
|
||||
### details
|
||||
|
||||
{{< new-in 0.140.0 >}}
|
||||
|
||||
{{% note %}}
|
||||
To override Hugo's embedded `details` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
|
||||
|
||||
[source code]: {{% eturl details %}}
|
||||
{{% /note %}}
|
||||
|
||||
Use the `details` shortcode to create a `details` HTML element. For example:
|
||||
|
||||
```text
|
||||
{{</* details summary="See the details" */>}}
|
||||
This is a **bold** word.
|
||||
{{</* /details */>}}
|
||||
```
|
||||
|
||||
Hugo renders this to:
|
||||
|
||||
```html
|
||||
<details>
|
||||
<summary>See the details</summary>
|
||||
<p>This is a <strong>bold</strong> word.</p>
|
||||
</details>
|
||||
```
|
||||
|
||||
The `details` shortcode accepts these named arguments:
|
||||
|
||||
summary
|
||||
: (`string`) The content of the child `summary` element rendered from Markdown to HTML. Default is `Details`.
|
||||
|
||||
open
|
||||
: (`bool`) Whether to initially display the content of the `details` element. Default is `false`.
|
||||
|
||||
class
|
||||
: (`string`) The value of the element's `class` attribute.
|
||||
|
||||
name
|
||||
: (`string`) The value of the element's `name` attribute.
|
||||
|
||||
title
|
||||
: (`string`) The value of the element's `title` attribute.
|
||||
|
||||
### figure
|
||||
|
||||
{{% note %}}
|
||||
To override Hugo's embedded `figure` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
|
||||
|
||||
[source code]: {{% eturl figure %}}
|
||||
{{% /note %}}
|
||||
|
||||
The `figure` shortcode can use the following named arguments:
|
||||
|
||||
src
|
||||
: URL of the image to be displayed.
|
||||
|
||||
link
|
||||
: If the image needs to be hyperlinked, URL of the destination.
|
||||
|
||||
target
|
||||
: Optional `target` attribute for the URL if `link` argument is set.
|
||||
|
||||
rel
|
||||
: Optional `rel` attribute for the URL if `link` argument is set.
|
||||
|
||||
alt
|
||||
: Alternate text for the image if the image cannot be displayed.
|
||||
|
||||
title
|
||||
: Image title.
|
||||
|
||||
caption
|
||||
: Image caption. Markdown within the value of `caption` will be rendered.
|
||||
|
||||
class
|
||||
: `class` attribute of the HTML `figure` tag.
|
||||
|
||||
height
|
||||
: `height` attribute of the image.
|
||||
|
||||
width
|
||||
: `width` attribute of the image.
|
||||
|
||||
loading
|
||||
: `loading` attribute of the image.
|
||||
|
||||
attr
|
||||
: Image attribution text. Markdown within the value of `attr` will be rendered.
|
||||
|
||||
attrlink
|
||||
: If the attribution text needs to be hyperlinked, URL of the destination.
|
||||
|
||||
Example usage:
|
||||
|
||||
```text
|
||||
{{</* figure src="elephant.jpg" title="An elephant at sunset" */>}}
|
||||
```
|
||||
|
||||
Rendered:
|
||||
|
||||
```html
|
||||
<figure>
|
||||
<img src="elephant.jpg">
|
||||
<figcaption><h4>An elephant at sunset</h4></figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
### gist
|
||||
|
||||
{{% note %}}
|
||||
To override Hugo's embedded `gist` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
|
||||
|
||||
[source code]: {{% eturl gist %}}
|
||||
{{% /note %}}
|
||||
|
||||
To display a GitHub [gist] with this URL:
|
||||
|
||||
[gist]: https://docs.github.com/en/get-started/writing-on-github/editing-and-sharing-content-with-gists
|
||||
|
||||
```text
|
||||
https://gist.github.com/user/50a7482715eac222e230d1e64dd9a89b
|
||||
```
|
||||
|
||||
Include this in your Markdown:
|
||||
|
||||
```text
|
||||
{{</* gist user 50a7482715eac222e230d1e64dd9a89b */>}}
|
||||
```
|
||||
|
||||
This will display all files in the gist alphabetically by file name.
|
||||
|
||||
{{< gist jmooring 23932424365401ffa5e9d9810102a477 >}}
|
||||
|
||||
To display a specific file within the gist:
|
||||
|
||||
```text
|
||||
{{</* gist user 23932424365401ffa5e9d9810102a477 list.html */>}}
|
||||
```
|
||||
|
||||
Rendered:
|
||||
|
||||
{{< gist jmooring 23932424365401ffa5e9d9810102a477 list.html >}}
|
||||
|
||||
### highlight
|
||||
|
||||
{{% note %}}
|
||||
To override Hugo's embedded `highlight` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
|
||||
|
||||
[source code]: {{% eturl highlight %}}
|
||||
{{% /note %}}
|
||||
|
||||
To display a highlighted code sample:
|
||||
|
||||
```text
|
||||
{{</* highlight go-html-template */>}}
|
||||
{{ range .Pages }}
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
|
||||
{{ end }}
|
||||
{{</* /highlight */>}}
|
||||
```
|
||||
|
||||
Rendered:
|
||||
|
||||
{{< highlight go-html-template >}}
|
||||
{{ range .Pages }}
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
|
||||
{{ end }}
|
||||
{{< /highlight >}}
|
||||
|
||||
To specify one or more [highlighting options], include a quotation-encapsulated, comma-separated list:
|
||||
|
||||
[highlighting options]: /functions/transform/highlight/
|
||||
|
||||
```text
|
||||
{{</* highlight go-html-template "lineNos=inline, lineNoStart=42" */>}}
|
||||
{{ range .Pages }}
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
|
||||
{{ end }}
|
||||
{{</* /highlight */>}}
|
||||
```
|
||||
|
||||
Rendered:
|
||||
|
||||
{{< highlight go-html-template "lineNos=inline, lineNoStart=42" >}}
|
||||
{{ range .Pages }}
|
||||
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
|
||||
{{ end }}
|
||||
{{< /highlight >}}
|
||||
|
||||
### instagram
|
||||
|
||||
{{% note %}}
|
||||
To override Hugo's embedded `instagram` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
|
||||
|
||||
[source code]: {{% eturl instagram %}}
|
||||
{{% /note %}}
|
||||
|
||||
To display an Instagram post with this URL:
|
||||
|
||||
```text
|
||||
https://www.instagram.com/p/CxOWiQNP2MO/
|
||||
```
|
||||
|
||||
Include this in your Markdown:
|
||||
|
||||
```text
|
||||
{{</* instagram CxOWiQNP2MO */>}}
|
||||
```
|
||||
|
||||
Rendered:
|
||||
|
||||
{{< instagram CxOWiQNP2MO >}}
|
||||
|
||||
### param
|
||||
|
||||
{{% note %}}
|
||||
To override Hugo's embedded `param` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
|
||||
|
||||
[source code]: {{% eturl param %}}
|
||||
{{% /note %}}
|
||||
|
||||
The `param` shortcode renders a parameter from the page's front matter, falling back to a site parameter of the same name. The shortcode throws an error if the parameter does not exist.
|
||||
|
||||
Example usage:
|
||||
|
||||
```text
|
||||
{{</* param testparam */>}}
|
||||
```
|
||||
|
||||
Access nested values by [chaining] the [identifiers]:
|
||||
|
||||
[chaining]: /getting-started/glossary/#chain
|
||||
[identifiers]: /getting-started/glossary/#identifier
|
||||
|
||||
```text
|
||||
{{</* param my.nested.param */>}}
|
||||
```
|
||||
|
||||
### qr
|
||||
|
||||
{{% note %}}
|
||||
To override Hugo's embedded `qr` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
|
||||
|
||||
[source code]: {{% eturl qr %}}
|
||||
{{% /note %}}
|
||||
|
||||
The `qr` shortcode encodes the given text into a [QR code] using the specified options and renders the resulting image.
|
||||
|
||||
[QR code]: https://en.wikipedia.org/wiki/QR_code
|
||||
|
||||
Use the self-closing syntax to pass the text as an argument:
|
||||
|
||||
```text
|
||||
{{</* qr text="https://gohugo.io" /*/>}}
|
||||
```
|
||||
|
||||
Or insert the text between the opening and closing tags:
|
||||
|
||||
```text
|
||||
{{</* qr */>}}
|
||||
https://gohugo.io
|
||||
{{</* /qr */>}}
|
||||
```
|
||||
|
||||
Both of the above produce this image:
|
||||
|
||||
{{< qr text="https://gohugo.io" class="qrcode" />}}
|
||||
|
||||
To create a QR code for a phone number:
|
||||
|
||||
```text
|
||||
{{</* qr text="tel:+12065550101" /*/>}}
|
||||
```
|
||||
|
||||
{{< qr text="tel:+12065550101" class="qrcode" />}}
|
||||
|
||||
To create a QR code containing contact information in the [vCard] format:
|
||||
|
||||
[vCard]: https://en.wikipedia.org/wiki/VCard
|
||||
|
||||
```text
|
||||
{{</* qr level="low" scale=2 alt="QR code of vCard for John Smith" */>}}
|
||||
BEGIN:VCARD
|
||||
VERSION:2.1
|
||||
N;CHARSET=UTF-8:Smith;John;R.;Dr.;PhD
|
||||
FN;CHARSET=UTF-8:Dr. John R. Smith, PhD.
|
||||
ORG;CHARSET=UTF-8:ABC Widgets
|
||||
TITLE;CHARSET=UTF-8:Vice President Engineering
|
||||
TEL;TYPE=WORK:+12065550101
|
||||
EMAIL;TYPE=WORK:jsmith@example.org
|
||||
END:VCARD
|
||||
{{</* /qr */>}}
|
||||
```
|
||||
|
||||
{{< qr level="low" scale=2 alt="QR code of vCard for John Smith" class="qrcode" >}}
|
||||
BEGIN:VCARD
|
||||
VERSION:2.1
|
||||
N;CHARSET=UTF-8:Smith;John;R.;Dr.;PhD
|
||||
FN;CHARSET=UTF-8:Dr. John R. Smith, PhD.
|
||||
ORG;CHARSET=UTF-8:ABC Widgets
|
||||
TITLE;CHARSET=UTF-8:Vice President Engineering
|
||||
TEL;TYPE=WORK:+12065550101
|
||||
EMAIL;TYPE=WORK:jsmith@example.org
|
||||
END:VCARD
|
||||
{{< /qr >}}
|
||||
|
||||
Internally this shortcode calls the `images.QR` function. Please read the [related documentation] for implementation details and guidance.
|
||||
|
||||
[related documentation]: /functions/images/qr/
|
||||
|
||||
The `qr` shortcode accepts these named arguments:
|
||||
|
||||
text
|
||||
: (`string`) The text to encode, falling back to the text between the opening and closing shortcode tags.
|
||||
|
||||
level
|
||||
: (`string`) The error correction level to use when encoding the text, one of `low`, `medium`, `quartile`, or `high`. Default is `medium`.
|
||||
|
||||
scale
|
||||
: (`int`) The number of image pixels per QR code module. Must be greater than or equal to 2. Default is `4`.
|
||||
|
||||
targetDir
|
||||
: (`string`) The subdirectory within the [`publishDir`] where Hugo will place the generated image.
|
||||
|
||||
[`publishDir`]: /getting-started/configuration/#publishdir
|
||||
|
||||
alt
|
||||
: (`string`) The `alt` attribute of the `img` element.
|
||||
|
||||
class
|
||||
: (`string`) The `class` attribute of the `img` element.
|
||||
|
||||
id
|
||||
: (`string`) The `id` attribute of the `img` element.
|
||||
|
||||
title
|
||||
: (`string`) The `title` attribute of the `img` element.
|
||||
|
||||
### ref
|
||||
|
||||
{{% note %}}
|
||||
To override Hugo's embedded `ref` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
|
||||
|
||||
Always use the `{{%/* */%}}` notation when calling this shortcode.
|
||||
|
||||
[source code]: {{% eturl ref %}}
|
||||
{{% /note %}}
|
||||
|
||||
The `ref` shortcode returns the permalink of the given page reference.
|
||||
|
||||
Example usage:
|
||||
|
||||
```text
|
||||
[Post 1]({{%/* ref "/posts/post-1" */%}})
|
||||
[Post 1]({{%/* ref "/posts/post-1.md" */%}})
|
||||
[Post 1]({{%/* ref "/posts/post-1#foo" */%}})
|
||||
[Post 1]({{%/* ref "/posts/post-1.md#foo" */%}})
|
||||
```
|
||||
|
||||
Rendered:
|
||||
|
||||
```html
|
||||
<a href="http://example.org/posts/post-1/">Post 1</a>
|
||||
<a href="http://example.org/posts/post-1/">Post 1</a>
|
||||
<a href="http://example.org/posts/post-1/#foo">Post 1</a>
|
||||
<a href="http://example.org/posts/post-1/#foo">Post 1</a>
|
||||
```
|
||||
|
||||
### relref
|
||||
|
||||
{{% note %}}
|
||||
To override Hugo's embedded `relref` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
|
||||
|
||||
Always use the `{{%/* */%}}` notation when calling this shortcode.
|
||||
|
||||
[source code]: {{% eturl relref %}}
|
||||
{{% /note %}}
|
||||
|
||||
The `relref` shortcode returns the permalink of the given page reference.
|
||||
|
||||
Example usage:
|
||||
|
||||
```text
|
||||
[Post 1]({{%/* relref "/posts/post-1" */%}})
|
||||
[Post 1]({{%/* relref "/posts/post-1.md" */%}})
|
||||
[Post 1]({{%/* relref "/posts/post-1#foo" */%}})
|
||||
[Post 1]({{%/* relref "/posts/post-1.md#foo" */%}})
|
||||
```
|
||||
|
||||
Rendered:
|
||||
|
||||
```html
|
||||
<a href="/posts/post-1/">Post 1</a>
|
||||
<a href="/posts/post-1/">Post 1</a>
|
||||
<a href="/posts/post-1/#foo">Post 1</a>
|
||||
<a href="/posts/post-1/#foo">Post 1</a>
|
||||
```
|
||||
|
||||
### twitter
|
||||
|
||||
{{% note %}}
|
||||
To override Hugo's embedded `twitter` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
|
||||
|
||||
[source code]: {{% eturl twitter %}}
|
||||
{{% /note %}}
|
||||
|
||||
To display a Twitter post with this URL:
|
||||
|
||||
```txt
|
||||
https://x.com/SanDiegoZoo/status/1453110110599868418
|
||||
```
|
||||
|
||||
Include this in your Markdown:
|
||||
|
||||
```text
|
||||
{{</* twitter user="SanDiegoZoo" id="1453110110599868418" */>}}
|
||||
```
|
||||
|
||||
Rendered:
|
||||
|
||||
{{< twitter user="SanDiegoZoo" id="1453110110599868418" >}}
|
||||
|
||||
### vimeo
|
||||
|
||||
{{% note %}}
|
||||
To override Hugo's embedded `vimeo` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
|
||||
|
||||
[source code]: {{% eturl vimeo %}}
|
||||
{{% /note %}}
|
||||
|
||||
To display a Vimeo video with this URL:
|
||||
|
||||
```text
|
||||
https://vimeo.com/channels/staffpicks/55073825
|
||||
```
|
||||
|
||||
Include this in your Markdown:
|
||||
|
||||
```text
|
||||
{{</* vimeo 55073825 */>}}
|
||||
```
|
||||
|
||||
Rendered:
|
||||
|
||||
{{< vimeo 55073825 >}}
|
||||
|
||||
{{% note %}}
|
||||
If you want to further customize the visual styling, add a `class` argument when calling the shortcode. The new `class` will be added to the `<div>` that wraps the `<iframe>` *and* will remove the inline styles. Note that you will need to call the `id` as a named argument as well. You can also give the vimeo video a descriptive title with `title`.
|
||||
|
||||
```go
|
||||
{{</* vimeo id="146022717" class="my-vimeo-wrapper-class" title="My vimeo video" */>}}
|
||||
```
|
||||
{{% /note %}}
|
||||
|
||||
### youtube
|
||||
|
||||
{{% note %}}
|
||||
To override Hugo's embedded `youtube` shortcode, copy the [source code] to a file with the same name in the layouts/shortcodes directory.
|
||||
|
||||
[source code]: {{% eturl youtube %}}
|
||||
{{% /note %}}
|
||||
|
||||
To display a YouTube video with this URL:
|
||||
|
||||
```text
|
||||
https://www.youtube.com/watch?v=0RKpf3rK57I
|
||||
```
|
||||
|
||||
Include this in your Markdown:
|
||||
|
||||
```text
|
||||
{{</* youtube 0RKpf3rK57I */>}}
|
||||
```
|
||||
|
||||
Rendered:
|
||||
|
||||
{{< youtube 0RKpf3rK57I >}}
|
||||
|
||||
The youtube shortcode accepts these named arguments:
|
||||
|
||||
id
|
||||
: (`string`) The video `id`. Optional if the `id` is provided as a positional argument as shown in the example above.
|
||||
|
||||
allowFullScreen
|
||||
{{< new-in 0.125.0 >}}
|
||||
: (`bool`) Whether the `iframe` element can activate full screen mode. Default is `true`.
|
||||
|
||||
autoplay
|
||||
{{< new-in 0.125.0 >}}
|
||||
: (`bool`) Whether to automatically play the video. Forces `mute` to `true`. Default is `false`.
|
||||
|
||||
class
|
||||
: (`string`) The `class` attribute of the wrapping `div` element. When specified, removes the `style` attributes from the `iframe` element and its wrapping `div` element.
|
||||
|
||||
controls
|
||||
{{< new-in 0.125.0 >}}
|
||||
: (`bool`) Whether to display the video controls. Default is `true`.
|
||||
|
||||
end
|
||||
{{< new-in 0.125.0 >}}
|
||||
: (`int`) The time, measured in seconds from the start of the video, when the player should stop playing the video.
|
||||
|
||||
loading
|
||||
{{< new-in 0.125.0 >}}
|
||||
: (`string`) The loading attribute of the `iframe` element, either `eager` or `lazy`. Default is `eager`.
|
||||
|
||||
loop
|
||||
{{< new-in 0.125.0 >}}
|
||||
: (`bool`) Whether to indefinitely repeat the video. Ignores the `start` and `end` arguments after the first play. Default is `false`.
|
||||
|
||||
mute
|
||||
{{< new-in 0.125.0 >}}
|
||||
: (`bool`) Whether to mute the video. Always `true` when `autoplay` is `true`. Default is `false`.
|
||||
|
||||
start
|
||||
{{< new-in 0.125.0 >}}
|
||||
: (`int`) The time, measured in seconds from the start of the video, when the player should start playing the video.
|
||||
|
||||
title
|
||||
: (`string`) The `title` attribute of the `iframe` element. Defaults to "YouTube video".
|
||||
|
||||
Example using some of the above:
|
||||
|
||||
```text
|
||||
{{</* youtube id=0RKpf3rK57I start=30 end=60 loading=lazy */>}}
|
||||
```
|
||||
See the [shortcodes](/shortcodes/) section.
|
||||
|
||||
## Privacy configuration
|
||||
|
||||
|
||||
@ -32,7 +32,7 @@ Run `hugo gen chromastyles -h` for more options. See https://xyproto.github.io/s
|
||||
|
||||
## Highlight shortcode
|
||||
|
||||
Highlighting is carried out via the built-in [`highlight` shortcode](/content-management/shortcodes/#highlight). It takes exactly one required argument for the programming language to be highlighted and requires a closing tag.
|
||||
Highlighting is carried out via the built-in [`highlight` shortcode](/shortcodes/highlight/). It takes exactly one required argument for the programming language to be highlighted and requires a closing tag.
|
||||
|
||||
Options:
|
||||
|
||||
|
||||
59
content/en/functions/_common/highlighting-options.md
Normal file
59
content/en/functions/_common/highlighting-options.md
Normal file
@ -0,0 +1,59 @@
|
||||
---
|
||||
_comment: Do not remove front matter.
|
||||
---
|
||||
|
||||
anchorLineNos
|
||||
: (`bool`) Whether to render each line number as an HTML anchor element, setting the `id` attribute of the surrounding `span` element to the line number. Irrelevant if `lineNos` is `false`. Default is `false`.
|
||||
|
||||
codeFences
|
||||
: (`bool`) Whether to highlight fenced code blocks. Default is `true`.
|
||||
|
||||
guessSyntax
|
||||
: (`bool`) Whether to automatically detect the language if the `LANG` argument is blank or set to a language for which there is no corresponding [lexer]. Falls back to a plain text lexer if unable to automatically detect the language. Default is `false`.
|
||||
|
||||
[lexer]: /getting-started/glossary/#lexer
|
||||
|
||||
{{% note %}}
|
||||
The Chroma syntax highlighter includes lexers for approximately 250 languages, but only 5 of these have implemented automatic language detection.
|
||||
{{% /note %}}
|
||||
|
||||
hl_Lines
|
||||
: (`string`) A space-delimited list of lines to emphasize within the highlighted code. To emphasize lines 2, 3, 4, and 7, set this value to `2-4 7`. This option is independent of the `lineNoStart` option.
|
||||
|
||||
hl_inline
|
||||
: (`bool`) Whether to render the highlighted code without a wrapping container. Default is `false`.
|
||||
|
||||
lineAnchors
|
||||
: (`string`) When rendering a line number as an HTML anchor element, prepend this value to the `id` attribute of the surrounding `span` element. This provides unique `id` attributes when a page contains two or more code blocks. Irrelevant if `lineNos` or `anchorLineNos` is `false`.
|
||||
|
||||
lineNoStart
|
||||
: (`int`) The number to display at the beginning of the first line. Irrelevant if `lineNos` is `false`. Default is `1`.
|
||||
|
||||
lineNos
|
||||
: (`bool`) Whether to display a number at the beginning of each line. Default is `false`.
|
||||
|
||||
lineNumbersInTable
|
||||
: (`bool`) Whether to render the highlighted code in an HTML table with two cells. The left table cell contains the line numbers, while the right table cell contains the code. Irrelevant if `lineNos` is `false`. Default is `true`.
|
||||
|
||||
noClasses
|
||||
: (`bool`) Whether to use inline CSS styles instead of an external CSS file. To use an external CSS file, set this value to `false` and generate the CSS file using the `hugo gen chromastyles` command. Default is `true`.
|
||||
|
||||
style
|
||||
: (`string`) The CSS styles to apply to the highlighted code. See the [style gallery] for examples. Case-sensitive. Default is `monokai`.
|
||||
|
||||
tabWidth
|
||||
: (`int`) Substitute this number of spaces for each tab character in your highlighted code. Irrelevant if `noClasses` is `false`. Default is `4`.
|
||||
|
||||
wrapperClass
|
||||
{{< new-in 0.140.2 >}}
|
||||
: (`string`) The class or classes to use for the outermost element of the highlighted code. Default is `highlight`.
|
||||
|
||||
{{% note %}}
|
||||
Instead of specifying both `lineNos` and `lineNumbersInTable`, you can use the following shorthand notation:
|
||||
|
||||
lineNos=inline
|
||||
: equivalent to `lineNos=true` and `lineNumbersInTable=false`
|
||||
|
||||
lineNos=table
|
||||
: equivalent to `lineNos=true` and `lineNumbersInTable=true`
|
||||
{{% /note %}}
|
||||
@ -109,4 +109,4 @@ https://gohugo.io
|
||||
|
||||
The `qr` shortcode accepts several arguments including `level` and `scale`. See the [related documentation] for details.
|
||||
|
||||
[related documentation]: /content-management/shortcodes/#qr
|
||||
[related documentation]: /shortcodes/qr/
|
||||
|
||||
@ -9,81 +9,31 @@ action:
|
||||
- functions/transform/CanHighlight
|
||||
- functions/transform/HighlightCodeBlock
|
||||
returnType: template.HTML
|
||||
signatures: ['transform.Highlight INPUT LANG [OPTIONS]']
|
||||
signatures: ['transform.Highlight CODE LANG [OPTIONS]']
|
||||
aliases: [/functions/highlight]
|
||||
toc: true
|
||||
---
|
||||
|
||||
The `highlight` function uses the [Chroma] syntax highlighter, supporting over 200 languages with more than 40 available styles.
|
||||
The `highlight` function uses the [Chroma] syntax highlighter, supporting over 200 languages with more than 40 [available styles].
|
||||
|
||||
[chroma]: https://github.com/alecthomas/chroma
|
||||
[available styles]: https://xyproto.github.io/splash/docs/
|
||||
|
||||
## Arguments
|
||||
|
||||
INPUT
|
||||
: The code to highlight.
|
||||
The `transform.Highlight` shortcode takes three arguments.
|
||||
|
||||
CODE
|
||||
: (`string`) The code to highlight.
|
||||
|
||||
LANG
|
||||
: The language of the code to highlight. Choose from one of the [supported languages]. Case-insensitive.
|
||||
: (`string`) The language of the code to highlight. Choose from one of the [supported languages]. This value is case-insensitive.
|
||||
|
||||
OPTIONS
|
||||
: A map or comma-separated list of zero or more options. Set default values in [site configuration].
|
||||
: (`map or string`) A map or space-separate key-value pairs wrapped in quotation marks. Set default values for each option in your [site configuration]. The key names are case-insensitive.
|
||||
|
||||
## Options
|
||||
|
||||
anchorLineNos
|
||||
: (`bool`) Whether to render each line number as an HTML anchor element, setting the `id` attribute of the surrounding `span` element to the line number. Irrelevant if `lineNos` is `false`. Default is `false`.
|
||||
|
||||
codeFences
|
||||
: (`bool`) Whether to highlight fenced code blocks. Default is `true`.
|
||||
|
||||
guessSyntax
|
||||
: (`bool`) Whether to automatically detect the language if the `LANG` argument is blank or set to a language for which there is no corresponding [lexer]. Falls back to a plain text lexer if unable to automatically detect the language. Default is `false`.
|
||||
|
||||
[lexer]: /getting-started/glossary/#lexer
|
||||
|
||||
{{% note %}}
|
||||
The Chroma syntax highlighter includes lexers for approximately 250 languages, but only 5 of these have implemented automatic language detection.
|
||||
{{% /note %}}
|
||||
|
||||
hl_Lines
|
||||
: (`string`) A space-delimited list of lines to emphasize within the highlighted code. To emphasize lines 2, 3, 4, and 7, set this value to `2-4 7`. This option is independent of the `lineNoStart` option.
|
||||
|
||||
hl_inline
|
||||
: (`bool`) Whether to render the highlighted code without a wrapping container.Default is `false`.
|
||||
|
||||
lineAnchors
|
||||
: (`string`) When rendering a line number as an HTML anchor element, prepend this value to the `id` attribute of the surrounding `span` element. This provides unique `id` attributes when a page contains two or more code blocks. Irrelevant if `lineNos` or `anchorLineNos` is `false`.
|
||||
|
||||
lineNoStart
|
||||
: (`int`) The number to display at the beginning of the first line. Irrelevant if `lineNos` is `false`. Default is `1`.
|
||||
|
||||
lineNos
|
||||
: (`bool`) Whether to display a number at the beginning of each line. Default is `false`.
|
||||
|
||||
lineNumbersInTable
|
||||
: (`bool`) Whether to render the highlighted code in an HTML table with two cells. The left table cell contains the line numbers, while the right table cell contains the code. Irrelevant if `lineNos` is `false`. Default is `true`.
|
||||
|
||||
noClasses
|
||||
: (`bool`) Whether to use inline CSS styles instead of an external CSS file. To use an external CSS file, set this value to `false` and generate the CSS file using the `hugo gen chromastyles` command. Default is `true`.
|
||||
|
||||
style
|
||||
: (`string`) The CSS styles to apply to the highlighted code. See the [style gallery] for examples. Case-sensitive. Default is `monokai`.
|
||||
|
||||
tabWidth
|
||||
: (`int`) Substitute this number of spaces for each tab character in your highlighted code. Irrelevant if `noClasses` is `false`. Default is `4`.
|
||||
|
||||
wrapperClass
|
||||
{{< new-in 0.140.2 >}}
|
||||
: (`string`) The class or classes to use for the outermost element of the highlighted code. Default is `highlight`.
|
||||
|
||||
{{% note %}}
|
||||
Instead of specifying both `lineNos` and `lineNumbersInTable`, you can use the following shorthand notation:
|
||||
|
||||
lineNos=inline
|
||||
: equivalent to `lineNos=true` and `lineNumbersInTable=false`
|
||||
|
||||
lineNos=table
|
||||
: equivalent to `lineNos=true` and `lineNumbersInTable=true`
|
||||
{{% /note %}}
|
||||
[site configuration]: /getting-started/configuration-markup#highlight
|
||||
[supported languages]: /content-management/syntax-highlighting#list-of-chroma-highlighting-languages
|
||||
|
||||
## Examples
|
||||
|
||||
@ -101,7 +51,6 @@ lineNos=table
|
||||
{{ transform.Highlight $input $lang $opts }}
|
||||
```
|
||||
|
||||
[Chroma]: https://github.com/alecthomas/chroma
|
||||
[site configuration]: /getting-started/configuration-markup#highlight
|
||||
[style gallery]: https://xyproto.github.io/splash/docs/
|
||||
[supported languages]: /content-management/syntax-highlighting#list-of-chroma-highlighting-languages
|
||||
## Options
|
||||
|
||||
{{% include "functions/_common/highlighting-options" %}}
|
||||
|
||||
@ -112,8 +112,8 @@ Methods|Functions|Shortcodes
|
||||
[`urls.RelRef`]: /functions/urls/relref/
|
||||
[`Page.GetPage`]: /methods/page/getpage/
|
||||
[`Site.GetPage`]: /methods/site/getpage/
|
||||
[`ref`]: /content-management/shortcodes/#ref
|
||||
[`relref`]: /content-management/shortcodes/#relref
|
||||
[`ref`]: /shortcodes/ref/
|
||||
[`relref`]: /shortcodes/relref/
|
||||
[`Page.Ref`]: /methods/page/ref/
|
||||
[`Page.RelRef`]: /methods/page/relref/
|
||||
[`Shortcode.Ref`]: /methods/shortcode/ref
|
||||
|
||||
16
content/en/shortcodes/_index.md
Normal file
16
content/en/shortcodes/_index.md
Normal file
@ -0,0 +1,16 @@
|
||||
---
|
||||
title: Shortcodes
|
||||
linkTitle: In this section
|
||||
description: Insert elements such as videos, images, and social media embeds into your content using Hugo's embedded shortcodes.
|
||||
categories: []
|
||||
keywords: []
|
||||
menu:
|
||||
docs:
|
||||
identifier: shortcodes-in-this-section
|
||||
parent: shortcodes
|
||||
weight: 10
|
||||
weight: 10
|
||||
showSectionMenu: true
|
||||
---
|
||||
|
||||
Insert elements such as videos, images, and social media embeds into your content using Hugo's embedded shortcodes.
|
||||
38
content/en/shortcodes/comment.md
Executable file
38
content/en/shortcodes/comment.md
Executable file
@ -0,0 +1,38 @@
|
||||
---
|
||||
title: Comment
|
||||
description: Include hidden comments in your content with the comment shortcode.
|
||||
categories: [shortcodes]
|
||||
keywords: []
|
||||
menu:
|
||||
docs:
|
||||
identifier: shortcodes-comment
|
||||
parent: shortcodes
|
||||
weight:
|
||||
weight:
|
||||
---
|
||||
|
||||
{{% note %}}
|
||||
To override Hugo's embedded `comment` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
|
||||
|
||||
[source code]: {{% eturl comment %}}
|
||||
{{% /note %}}
|
||||
|
||||
{{< new-in "0.137.1" >}}
|
||||
|
||||
Use the `comment` shortcode to include comments in your content. Hugo will ignore the text within these comments when rendering your site.
|
||||
|
||||
Use it inline:
|
||||
|
||||
```text
|
||||
{{%/* comment */%}} TODO: rewrite the paragraph below. {{%/* /comment */%}}
|
||||
```
|
||||
|
||||
Or as a block comment:
|
||||
|
||||
```text
|
||||
{{%/* comment */%}}
|
||||
TODO: rewrite the paragraph below.
|
||||
{{%/* /comment */%}}
|
||||
```
|
||||
|
||||
Although you can call this shortcode using the `{{</* */>}}` notation, computationally it is more efficient to call it using the `{{%/* */%}}` notation as shown above.
|
||||
80
content/en/shortcodes/details.md
Executable file
80
content/en/shortcodes/details.md
Executable file
@ -0,0 +1,80 @@
|
||||
---
|
||||
title: Details
|
||||
description: Insert an HTML details element into your content using the details shortcode.
|
||||
categories: [shortcodes]
|
||||
keywords: []
|
||||
menu:
|
||||
docs:
|
||||
parent: shortcodes
|
||||
weight:
|
||||
weight:
|
||||
toc: true
|
||||
---
|
||||
|
||||
{{< new-in 0.140.0 >}}
|
||||
|
||||
{{% note %}}
|
||||
To override Hugo's embedded `details` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
|
||||
|
||||
[source code]: {{% eturl details %}}
|
||||
{{% /note %}}
|
||||
|
||||
## Example
|
||||
|
||||
With this markup:
|
||||
|
||||
```text
|
||||
{{</* details summary="See the details" */>}}
|
||||
This is a **bold** word.
|
||||
{{</* /details */>}}
|
||||
```
|
||||
|
||||
Hugo renders this HTML:
|
||||
|
||||
```html
|
||||
<details>
|
||||
<summary>See the details</summary>
|
||||
<p>This is a <strong>bold</strong> word.</p>
|
||||
</details>
|
||||
```
|
||||
|
||||
Which looks like this in your browser:
|
||||
|
||||
{{< details summary="See the details" >}}
|
||||
This is a **bold** word.
|
||||
{{< /details >}}
|
||||
|
||||
## Arguments
|
||||
|
||||
summary
|
||||
: (`string`) The content of the child `summary` element rendered from Markdown to HTML. Default is `Details`.
|
||||
|
||||
open
|
||||
: (`bool`) Whether to initially display the content of the `details` element. Default is `false`.
|
||||
|
||||
class
|
||||
: (`string`) The `class` attribute of the `details` element.
|
||||
|
||||
name
|
||||
: (`string`) The `name` attribute of the `details` element.
|
||||
|
||||
title
|
||||
: (`string`) The `title` attribute of the `details` element.
|
||||
|
||||
## Styling
|
||||
|
||||
Use CSS to style the `details` element, the `summary` element, and the content itself.
|
||||
|
||||
```css
|
||||
/* target the details element */
|
||||
details { }
|
||||
|
||||
/* target the summary element */
|
||||
details > summary { }
|
||||
|
||||
/* target the children of the summary element */
|
||||
details > summary > * { }
|
||||
|
||||
/* target the content */
|
||||
details > :not(summary) { }
|
||||
```
|
||||
121
content/en/shortcodes/figure.md
Executable file
121
content/en/shortcodes/figure.md
Executable file
@ -0,0 +1,121 @@
|
||||
---
|
||||
title: Figure
|
||||
description: Insert an HTML figure element into your content using the figure shortcode.
|
||||
categories: [shortcodes]
|
||||
keywords: []
|
||||
menu:
|
||||
docs:
|
||||
parent: shortcodes
|
||||
weight:
|
||||
weight:
|
||||
toc: true
|
||||
---
|
||||
|
||||
{{% note %}}
|
||||
To override Hugo's embedded `figure` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
|
||||
|
||||
[source code]: {{% eturl figure %}}
|
||||
{{% /note %}}
|
||||
|
||||
## Example
|
||||
|
||||
With this markup:
|
||||
|
||||
```text
|
||||
{{</* figure
|
||||
src="/images/examples/zion-national-park.jpg"
|
||||
alt="A photograph of Zion National Park"
|
||||
link="https://www.nps.gov/zion/index.htm"
|
||||
caption="Zion National Park"
|
||||
class="ma0 w-75"
|
||||
*/>}}
|
||||
```
|
||||
|
||||
Hugo renders this HTML:
|
||||
|
||||
```html
|
||||
<figure class="ma0 w-75">
|
||||
<a href="https://www.nps.gov/zion/index.htm">
|
||||
<img
|
||||
src="/images/examples/zion-national-park.jpg"
|
||||
alt="A photograph of Zion National Park"
|
||||
>
|
||||
</a>
|
||||
<figcaption>
|
||||
<p>Zion National Park</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
```
|
||||
|
||||
Which looks like this in your browser:
|
||||
|
||||
{{< figure
|
||||
src="/images/examples/zion-national-park.jpg"
|
||||
alt="A photograph of Zion National Park"
|
||||
link="https://www.nps.gov/zion/index.htm"
|
||||
caption="Zion National Park"
|
||||
class="ma0 w-75"
|
||||
>}}
|
||||
|
||||
## Arguments
|
||||
|
||||
src
|
||||
: (`string`) The `src` attribute of the `img` element. Typically this is a [page resource] or a [global resource].
|
||||
|
||||
[page resource]: /getting-started/glossary/#page-resource
|
||||
[global resource]: /getting-started/glossary/#global-resource
|
||||
|
||||
alt
|
||||
: (`string`) The `alt` attribute of the `img` element.
|
||||
|
||||
width
|
||||
: (`int`) The `width` attribute of the `img` element.
|
||||
|
||||
height
|
||||
: (`int`) The `height` attribute of the `img` element.
|
||||
|
||||
loading
|
||||
: (`string`) The `loading` attribute of the `img` element.
|
||||
|
||||
class
|
||||
: (`string`) The `class` attribute of the `figure` element.
|
||||
|
||||
link
|
||||
: (`string`) The `href` attribute of the anchor element that wraps the `img` element.
|
||||
|
||||
target
|
||||
: (`string`) The `target` attribute of the anchor element that wraps the `img` element.
|
||||
|
||||
rel
|
||||
: (`rel`) The `rel` attribute of the anchor element that wraps the `img` element.
|
||||
|
||||
title
|
||||
: (`string`) Within the `figurecaption` element, the title is at the top, wrapped within an `h4` element.
|
||||
|
||||
caption
|
||||
: (`string`) Within the `figurecaption` element, the caption is at the bottom and may contain plain text or markdown.
|
||||
|
||||
attr
|
||||
: (`string`) Within the `figurecaption` element, the attribution appears next to the caption and may contain plain text or markdown.
|
||||
|
||||
attrlink
|
||||
: (`string`) The `href` attribute of the anchor element that wraps the attribution.
|
||||
|
||||
## Image location
|
||||
|
||||
The `figure` shortcode resolves internal Markdown destinations by looking for a matching [page resource], falling back to a matching [global resource]. Remote destinations are passed through, and the render hook will not throw an error or warning if unable to resolve a destination.
|
||||
|
||||
[page resource]: /getting-started/glossary/#page-resource
|
||||
[global resource]: /getting-started/glossary/#global-resource
|
||||
|
||||
You must place global resources in the assets directory. If you have placed your resources in the static directory, and you are unable or unwilling to move them, you must mount the static directory to the assets directory by including both of these entries in your site configuration:
|
||||
|
||||
{{< code-toggle file=hugo >}}
|
||||
[[module.mounts]]
|
||||
source = 'assets'
|
||||
target = 'assets'
|
||||
|
||||
[[module.mounts]]
|
||||
source = 'static'
|
||||
target = 'assets'
|
||||
{{< /code-toggle >}}
|
||||
41
content/en/shortcodes/gist.md
Executable file
41
content/en/shortcodes/gist.md
Executable file
@ -0,0 +1,41 @@
|
||||
---
|
||||
title: Gist
|
||||
description: Embed a GitHub Gist in your content using the gist shortcode.
|
||||
categories: [shortcodes]
|
||||
keywords: []
|
||||
menu:
|
||||
docs:
|
||||
parent: shortcodes
|
||||
weight:
|
||||
weight:
|
||||
---
|
||||
|
||||
{{% note %}}
|
||||
To override Hugo's embedded `gist` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
|
||||
|
||||
[source code]: {{% eturl gist %}}
|
||||
{{% /note %}}
|
||||
|
||||
To display a GitHub gist with this URL:
|
||||
|
||||
```text
|
||||
https://gist.github.com/user/50a7482715eac222e230d1e64dd9a89b
|
||||
```
|
||||
|
||||
Include this in your Markdown:
|
||||
|
||||
```text
|
||||
{{</* gist user 23932424365401ffa5e9d9810102a477 */>}}
|
||||
```
|
||||
|
||||
This will display all files in the gist alphabetically by file name.
|
||||
|
||||
{{< gist jmooring 23932424365401ffa5e9d9810102a477 >}}
|
||||
|
||||
To display a specific file within the gist:
|
||||
|
||||
```text
|
||||
{{</* gist user 23932424365401ffa5e9d9810102a477 list.html */>}}
|
||||
```
|
||||
|
||||
{{< gist jmooring 23932424365401ffa5e9d9810102a477 list.html >}}
|
||||
118
content/en/shortcodes/highlight.md
Executable file
118
content/en/shortcodes/highlight.md
Executable file
@ -0,0 +1,118 @@
|
||||
---
|
||||
title: Highlight
|
||||
description: Insert syntax-highlighted code into your content using the highlight shortcode.
|
||||
categories: [shortcodes]
|
||||
keywords: []
|
||||
menu:
|
||||
docs:
|
||||
parent: shortcodes
|
||||
weight:
|
||||
weight:
|
||||
toc: true
|
||||
---
|
||||
|
||||
{{% note %}}
|
||||
To override Hugo's embedded `highlight` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
|
||||
|
||||
[source code]: {{% eturl highlight %}}
|
||||
{{% /note %}}
|
||||
|
||||
{{% note %}}
|
||||
With the Markdown [content format], the `highlight` shortcode is rarely needed because, by default, Hugo automatically applies syntax highlighting to fenced code blocks.
|
||||
|
||||
The primary use case for the `highlight` shortcode in Markdown is to apply syntax highlighting to inline code snippets.
|
||||
|
||||
[content format]: /content-management/formats/
|
||||
{{% /note %}}
|
||||
|
||||
The `highlight` shortcode calls the [`transform.Highlight`] function which uses the [Chroma] syntax highlighter, supporting over 200 languages with more than 40 [available styles].
|
||||
|
||||
[chroma]: https://github.com/alecthomas/chroma
|
||||
[available styles]: https://xyproto.github.io/splash/docs/
|
||||
[`transform.Highlight`]: /functions/transform/highlight/
|
||||
|
||||
## Arguments
|
||||
|
||||
The `highlight` shortcode takes three arguments.
|
||||
|
||||
```text
|
||||
{{</* highlight LANG OPTIONS */>}}
|
||||
CODE
|
||||
{{</* /highlight */>}}
|
||||
```
|
||||
|
||||
CODE
|
||||
: (`string`) The code to highlight.
|
||||
|
||||
LANG
|
||||
: (`string`) The language of the code to highlight. Choose from one of the [supported languages]. This value is case-insensitive.
|
||||
|
||||
OPTIONS
|
||||
: (`string`) Zero or more space-separated key-value pairs wrapped in quotation marks. Set default values for each option in your [site configuration]. The key names are case-insensitive.
|
||||
|
||||
[site configuration]: /getting-started/configuration-markup#highlight
|
||||
[supported languages]: https://gohugo.io/content-management/syntax-highlighting/#list-of-chroma-highlighting-languages
|
||||
|
||||
## Example
|
||||
|
||||
```text
|
||||
{{</* highlight go "linenos=inline, hl_Lines=3 6-8, style=emacs" */>}}
|
||||
package main
|
||||
|
||||
import "fmt"
|
||||
|
||||
func main() {
|
||||
for i := 0; i < 3; i++ {
|
||||
fmt.Println("Value of i:", i)
|
||||
}
|
||||
}
|
||||
{{</* /highlight */>}}
|
||||
```
|
||||
|
||||
Hugo renders this to:
|
||||
|
||||
{{< highlight go "linenos=inline, hl_Lines=3 6-8, noClasses=true" >}}
|
||||
package main
|
||||
|
||||
import "fmt"
|
||||
|
||||
func main() {
|
||||
for i := 0; i < 3; i++ {
|
||||
fmt.Println("Value of i:", i)
|
||||
}
|
||||
}
|
||||
{{< /highlight >}}
|
||||
|
||||
You can also use the `highlight` shortcode for inline code snippets:
|
||||
|
||||
```text
|
||||
This is some {{</* highlight go "hl_inline=true" */>}}fmt.Println("inline"){{</* /highlight */>}} code.
|
||||
```
|
||||
|
||||
Hugo renders this to:
|
||||
|
||||
This is some {{< highlight go "hl_inline=true, noClasses=true" >}}fmt.Println("inline"){{< /highlight >}} code.
|
||||
|
||||
Given the verbosity of the example above, if you need to frequently highlight inline code snippets, create your own shortcode using a shorter name with preset options.
|
||||
|
||||
{{< code file=layouts/shortcodes/hl.html >}}
|
||||
{{ $code := .Inner | strings.TrimSpace }}
|
||||
{{ $lang := or (.Get 0) "go" }}
|
||||
{{ $opts := dict "hl_inline" true "noClasses" true }}
|
||||
{{ transform.Highlight $code $lang $opts }}
|
||||
{{< /code >}}
|
||||
|
||||
|
||||
```text
|
||||
This is some {{</* hl */>}}fmt.Println("inline"){{</* /hl */>}} code.
|
||||
```
|
||||
|
||||
Hugo renders this to:
|
||||
|
||||
This is some {{< hl >}}fmt.Println("inline"){{< /hl >}} code.
|
||||
|
||||
## Options
|
||||
|
||||
Pass the options when calling the shortcode. You can set their default values in your [site configuration].
|
||||
|
||||
{{% include "functions/_common/highlighting-options" %}}
|
||||
56
content/en/shortcodes/instagram.md
Executable file
56
content/en/shortcodes/instagram.md
Executable file
@ -0,0 +1,56 @@
|
||||
---
|
||||
title: Instagram
|
||||
description: Embed an Instagram post in your content using the instagram shortcode.
|
||||
categories: [shortcodes]
|
||||
keywords: []
|
||||
menu:
|
||||
docs:
|
||||
parent: shortcodes
|
||||
weight:
|
||||
weight:
|
||||
toc: true
|
||||
---
|
||||
|
||||
{{% note %}}
|
||||
To override Hugo's embedded `instagram` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
|
||||
|
||||
[source code]: {{% eturl instagram %}}
|
||||
{{% /note %}}
|
||||
|
||||
## Example
|
||||
|
||||
To display an Instagram post with this URL:
|
||||
|
||||
```text
|
||||
https://www.instagram.com/p/CxOWiQNP2MO/
|
||||
```
|
||||
|
||||
Include this in your Markdown:
|
||||
|
||||
```text
|
||||
{{</* instagram CxOWiQNP2MO */>}}
|
||||
```
|
||||
|
||||
Huge renders this to:
|
||||
|
||||
{{< instagram CxOWiQNP2MO >}}
|
||||
|
||||
## Privacy
|
||||
|
||||
Adjust the relevant privacy settings in your site configuration.
|
||||
|
||||
{{< code-toggle config=privacy.instagram />}}
|
||||
|
||||
disable
|
||||
: (`bool`) Whether to disable the shortcode. Default is `false`.
|
||||
|
||||
simple
|
||||
: (`bool`) Whether to enable simple mode for image card generation. If `true`, Hugo creates a static card without JavaScript. This mode only supports image cards, and the image is fetched directly from Instagram's servers. Default is `false`.
|
||||
|
||||
The source code for the simple version of the shortcode is available [here].
|
||||
|
||||
If you enable simple mode you may want to disable the hardcoded inline styles by setting `disableInlineCSS` to `true` in your site configuration. The default value for this setting is `false`.
|
||||
|
||||
[here]: {{% eturl instagram_simple %}}
|
||||
|
||||
{{< code-toggle config=services.instagram />}}
|
||||
48
content/en/shortcodes/param.md
Executable file
48
content/en/shortcodes/param.md
Executable file
@ -0,0 +1,48 @@
|
||||
---
|
||||
title: Param
|
||||
description: Insert a parameter from front matter or site configuration into your content using the param shortcode.
|
||||
categories: [shortcodes]
|
||||
keywords: []
|
||||
menu:
|
||||
docs:
|
||||
parent: shortcodes
|
||||
weight:
|
||||
weight:
|
||||
---
|
||||
|
||||
{{% note %}}
|
||||
To override Hugo's embedded `param` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
|
||||
|
||||
[source code]: {{% eturl param %}}
|
||||
{{% /note %}}
|
||||
|
||||
The `param` shortcode renders a parameter from front matter, falling back to a site parameter of the same name. The shortcode throws an error if the parameter does not exist.
|
||||
|
||||
{{< code file=example.md lang=text >}}
|
||||
---
|
||||
title: Example
|
||||
date: 2025-01-15T23:29:46-08:00
|
||||
params:
|
||||
color: red
|
||||
size: medium
|
||||
---
|
||||
|
||||
We found a {{</* param "color" */>}} shirt.
|
||||
{{< /code >}}
|
||||
|
||||
Hugo renders this to:
|
||||
|
||||
```html
|
||||
<p>We found a red shirt.</p>
|
||||
```
|
||||
|
||||
|
||||
|
||||
Access nested values by [chaining] the [identifiers]:
|
||||
|
||||
[chaining]: /getting-started/glossary/#chain
|
||||
[identifiers]: /getting-started/glossary/#identifier
|
||||
|
||||
```text
|
||||
{{</* param my.nested.param */>}}
|
||||
```
|
||||
113
content/en/shortcodes/qr.md
Executable file
113
content/en/shortcodes/qr.md
Executable file
@ -0,0 +1,113 @@
|
||||
---
|
||||
title: QR
|
||||
description: Insert a QR code into your content using the qr shortcode.
|
||||
categories: [shortcodes]
|
||||
keywords: []
|
||||
menu:
|
||||
docs:
|
||||
parent: shortcodes
|
||||
weight:
|
||||
weight:
|
||||
toc: true
|
||||
---
|
||||
|
||||
{{< new-in 0.141.0 >}}
|
||||
|
||||
{{% note %}}
|
||||
To override Hugo's embedded `qr` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
|
||||
|
||||
[source code]: {{% eturl qr %}}
|
||||
{{% /note %}}
|
||||
|
||||
The `qr` shortcode encodes the given text into a [QR code] using the specified options and renders the resulting image.
|
||||
|
||||
Internally this shortcode calls the `images.QR` function. Please read the [related documentation] for implementation details and guidance.
|
||||
|
||||
[QR code]: https://en.wikipedia.org/wiki/QR_code
|
||||
[related documentation]: /functions/images/qr/
|
||||
|
||||
## Examples
|
||||
|
||||
Use the self-closing syntax to pass the text as an argument:
|
||||
|
||||
```text
|
||||
{{</* qr text="https://gohugo.io" /*/>}}
|
||||
```
|
||||
|
||||
Or insert the text between the opening and closing tags:
|
||||
|
||||
```text
|
||||
{{</* qr */>}}
|
||||
https://gohugo.io
|
||||
{{</* /qr */>}}
|
||||
```
|
||||
|
||||
Both of the above produce this image:
|
||||
|
||||
{{< qr text="https://gohugo.io" class="qrcode" />}}
|
||||
|
||||
To create a QR code for a phone number:
|
||||
|
||||
```text
|
||||
{{</* qr text="tel:+12065550101" /*/>}}
|
||||
```
|
||||
|
||||
{{< qr text="tel:+12065550101" class="qrcode" />}}
|
||||
|
||||
To create a QR code containing contact information in the [vCard] format:
|
||||
|
||||
[vCard]: https://en.wikipedia.org/wiki/VCard
|
||||
|
||||
```text
|
||||
{{</* qr level="low" scale=2 alt="QR code of vCard for John Smith" */>}}
|
||||
BEGIN:VCARD
|
||||
VERSION:2.1
|
||||
N;CHARSET=UTF-8:Smith;John;R.;Dr.;PhD
|
||||
FN;CHARSET=UTF-8:Dr. John R. Smith, PhD.
|
||||
ORG;CHARSET=UTF-8:ABC Widgets
|
||||
TITLE;CHARSET=UTF-8:Vice President Engineering
|
||||
TEL;TYPE=WORK:+12065550101
|
||||
EMAIL;TYPE=WORK:jsmith@example.org
|
||||
END:VCARD
|
||||
{{</* /qr */>}}
|
||||
```
|
||||
|
||||
{{< qr level="low" scale=2 alt="QR code of vCard for John Smith" class="qrcode" >}}
|
||||
BEGIN:VCARD
|
||||
VERSION:2.1
|
||||
N;CHARSET=UTF-8:Smith;John;R.;Dr.;PhD
|
||||
FN;CHARSET=UTF-8:Dr. John R. Smith, PhD.
|
||||
ORG;CHARSET=UTF-8:ABC Widgets
|
||||
TITLE;CHARSET=UTF-8:Vice President Engineering
|
||||
TEL;TYPE=WORK:+12065550101
|
||||
EMAIL;TYPE=WORK:jsmith@example.org
|
||||
END:VCARD
|
||||
{{< /qr >}}
|
||||
|
||||
## Arguments
|
||||
|
||||
text
|
||||
: (`string`) The text to encode, falling back to the text between the opening and closing shortcode tags.
|
||||
|
||||
level
|
||||
: (`string`) The error correction level to use when encoding the text, one of `low`, `medium`, `quartile`, or `high`. Default is `medium`.
|
||||
|
||||
scale
|
||||
: (`int`) The number of image pixels per QR code module. Must be greater than or equal to 2. Default is `4`.
|
||||
|
||||
targetDir
|
||||
: (`string`) The subdirectory within the [`publishDir`] where Hugo will place the generated image.
|
||||
|
||||
[`publishDir`]: /getting-started/configuration/#publishdir
|
||||
|
||||
alt
|
||||
: (`string`) The `alt` attribute of the `img` element.
|
||||
|
||||
class
|
||||
: (`string`) The `class` attribute of the `img` element.
|
||||
|
||||
id
|
||||
: (`string`) The `id` attribute of the `img` element.
|
||||
|
||||
title
|
||||
: (`string`) The `title` attribute of the `img` element.
|
||||
48
content/en/shortcodes/ref.md
Executable file
48
content/en/shortcodes/ref.md
Executable file
@ -0,0 +1,48 @@
|
||||
---
|
||||
title: Ref
|
||||
description: Insert a permalink to the given page reference using the ref shortcode.
|
||||
categories: [shortcodes]
|
||||
keywords: []
|
||||
menu:
|
||||
docs:
|
||||
parent: shortcodes
|
||||
weight:
|
||||
weight:
|
||||
---
|
||||
|
||||
{{% note %}}
|
||||
To override Hugo's embedded `ref` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
|
||||
|
||||
[source code]: {{% eturl ref %}}
|
||||
{{% /note %}}
|
||||
|
||||
{{% note %}}
|
||||
When working with the Markdown [content format], this shortcode has become largely redundant. Its functionality is now primarily handled by [link render hooks], specifically the embedded one provided by Hugo. This hook effectively addresses all the use cases previously covered by this shortcode.
|
||||
|
||||
[content format]: /content-management/formats/
|
||||
[link render hooks]: /render-hooks/images/#default
|
||||
{{% /note %}}
|
||||
|
||||
The `ref` shortcode returns the permalink of the given page reference.
|
||||
|
||||
Example usage:
|
||||
|
||||
```text
|
||||
[Post 1]({{%/* ref "/posts/post-1" */%}})
|
||||
[Post 1]({{%/* ref "/posts/post-1.md" */%}})
|
||||
[Post 1]({{%/* ref "/posts/post-1#foo" */%}})
|
||||
[Post 1]({{%/* ref "/posts/post-1.md#foo" */%}})
|
||||
```
|
||||
|
||||
Rendered:
|
||||
|
||||
```html
|
||||
<a href="https://example.org/posts/post-1/">Post 1</a>
|
||||
<a href="https://example.org/posts/post-1/">Post 1</a>
|
||||
<a href="https://example.org/posts/post-1/#foo">Post 1</a>
|
||||
<a href="https://example.org/posts/post-1/#foo">Post 1</a>
|
||||
```
|
||||
|
||||
{{% note %}}
|
||||
Always use the `{{%/* */%}}` notation when calling this shortcode.
|
||||
{{% /note %}}
|
||||
48
content/en/shortcodes/relref.md
Executable file
48
content/en/shortcodes/relref.md
Executable file
@ -0,0 +1,48 @@
|
||||
---
|
||||
title: Relref
|
||||
description: Insert a relative permalink to the given page reference using the relref shortcode.
|
||||
categories: [shortcodes]
|
||||
keywords: []
|
||||
menu:
|
||||
docs:
|
||||
parent: shortcodes
|
||||
weight:
|
||||
weight:
|
||||
---
|
||||
|
||||
{{% note %}}
|
||||
To override Hugo's embedded `relref` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
|
||||
|
||||
[source code]: {{% eturl relref %}}
|
||||
{{% /note %}}
|
||||
|
||||
{{% note %}}
|
||||
When working with the Markdown [content format], this shortcode has become largely redundant. Its functionality is now primarily handled by [link render hooks], specifically the embedded one provided by Hugo. This hook effectively addresses all the use cases previously covered by this shortcode.
|
||||
|
||||
[content format]: /content-management/formats/
|
||||
[link render hooks]: /render-hooks/images/#default
|
||||
{{% /note %}}
|
||||
|
||||
The `relref` shortcode returns the relative permalink of the given page reference.
|
||||
|
||||
Example usage:
|
||||
|
||||
```text
|
||||
[Post 1]({{%/* relref "/posts/post-1" */%}})
|
||||
[Post 1]({{%/* relref "/posts/post-1.md" */%}})
|
||||
[Post 1]({{%/* relref "/posts/post-1#foo" */%}})
|
||||
[Post 1]({{%/* relref "/posts/post-1.md#foo" */%}})
|
||||
```
|
||||
|
||||
Rendered:
|
||||
|
||||
```html
|
||||
<a href="/posts/post-1/">Post 1</a>
|
||||
<a href="/posts/post-1/">Post 1</a>
|
||||
<a href="/posts/post-1/#foo">Post 1</a>
|
||||
<a href="/posts/post-1/#foo">Post 1</a>
|
||||
```
|
||||
|
||||
{{% note %}}
|
||||
Always use the `{{%/* */%}}` notation when calling this shortcode.
|
||||
{{% /note %}}
|
||||
72
content/en/shortcodes/vimeo.md
Executable file
72
content/en/shortcodes/vimeo.md
Executable file
@ -0,0 +1,72 @@
|
||||
---
|
||||
title: Vimeo
|
||||
description: Embed a Vimeo video in your content using the vimeo shortcode.
|
||||
categories: [shortcodes]
|
||||
keywords: []
|
||||
menu:
|
||||
docs:
|
||||
parent: shortcodes
|
||||
weight:
|
||||
weight:
|
||||
toc: true
|
||||
---
|
||||
|
||||
{{% note %}}
|
||||
To override Hugo's embedded `vimeo` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
|
||||
|
||||
[source code]: {{% eturl vimeo %}}
|
||||
{{% /note %}}
|
||||
|
||||
## Example
|
||||
|
||||
To display a Vimeo video with this URL:
|
||||
|
||||
```text
|
||||
https://vimeo.com/channels/staffpicks/55073825
|
||||
```
|
||||
|
||||
Include this in your Markdown:
|
||||
|
||||
```text
|
||||
{{</* vimeo 55073825 */>}}
|
||||
```
|
||||
|
||||
Hugo renders this to:
|
||||
|
||||
{{< vimeo 55073825 >}}
|
||||
|
||||
## Arguments
|
||||
|
||||
class
|
||||
: (`string`) The `class` attribute of the wrapping `div` element. Adding one or more CSS classes disables inline styling.
|
||||
|
||||
id
|
||||
: (`string`) The `id` of the Vimeo video
|
||||
|
||||
title
|
||||
: (`string`) The `title` attribute of the `iframe` element.
|
||||
|
||||
If you proivde a `class` or `title` you must use a named parameter for the `id`.
|
||||
|
||||
```text
|
||||
{{</* vimeo id=55073825 class="foo bar" title="My Video" */>}}
|
||||
```
|
||||
|
||||
## Privacy
|
||||
|
||||
Adjust the relevant privacy settings in your site configuration.
|
||||
|
||||
{{< code-toggle config=privacy.vimeo />}}
|
||||
|
||||
disable
|
||||
: (`bool`) Whether to disable the shortcode. Default is `false`.
|
||||
|
||||
enableDNT
|
||||
: (`bool`) Whether to block the Vimeo player from tracking session data and analytics. Default is `false`.
|
||||
|
||||
simple
|
||||
: (`bool`) Whether to enable simple mode. If `true`, the video thumbnail is fetched from Vimeo and overlaid with a play button. Clicking the thumbnail opens the video in a new Vimeo tab. Default is `false`.
|
||||
|
||||
The source code for the simple version of the shortcode is available [here].
|
||||
|
||||
[here]: {{% eturl vimeo_simple %}}
|
||||
62
content/en/shortcodes/x.md
Executable file
62
content/en/shortcodes/x.md
Executable file
@ -0,0 +1,62 @@
|
||||
---
|
||||
title: X
|
||||
description: Embed an X post in your content using the x shortcode.
|
||||
categories: [shortcodes]
|
||||
keywords: []
|
||||
menu:
|
||||
docs:
|
||||
parent: shortcodes
|
||||
weight:
|
||||
weight:
|
||||
toc: true
|
||||
---
|
||||
|
||||
{{< new-in 0.141.0 >}}
|
||||
|
||||
{{% note %}}
|
||||
To override Hugo's embedded `x` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
|
||||
|
||||
[source code]: {{% eturl x %}}
|
||||
{{% /note %}}
|
||||
|
||||
## Example
|
||||
|
||||
To display an X post with this URL:
|
||||
|
||||
```txt
|
||||
https://x.com/SanDiegoZoo/status/1453110110599868418
|
||||
```
|
||||
|
||||
Include this in your Markdown:
|
||||
|
||||
```text
|
||||
{{</* x user="SanDiegoZoo" id="1453110110599868418" */>}}
|
||||
```
|
||||
|
||||
Rendered:
|
||||
|
||||
{{< x user="SanDiegoZoo" id="1453110110599868418" >}}
|
||||
|
||||
|
||||
## Privacy
|
||||
|
||||
Adjust the relevant privacy settings in your site configuration.
|
||||
|
||||
{{< code-toggle config=privacy.x />}}
|
||||
|
||||
disable
|
||||
: (`bool`) Whether to disable the shortcode. Default is `false`.
|
||||
|
||||
enableDNT
|
||||
: (`bool`) Whether to prevent X from using post and embedded page data for personalized suggestions and ads. Default is `false`.
|
||||
|
||||
simple
|
||||
: (`bool`) Whether to enable simple mode. If `true`, Hugo builds a static version of the of the post without JavaScript. Default is `false`.
|
||||
|
||||
The source code for the simple version of the shortcode is available [here].
|
||||
|
||||
[here]: {{% eturl x_simple %}}
|
||||
|
||||
If you enable simple mode you may want to disable the hardcoded inline styles by setting `disableInlineCSS` to `true` in your site configuration. The default value for this setting is `false`.
|
||||
|
||||
{{< code-toggle config=services.x />}}
|
||||
97
content/en/shortcodes/youtube.md
Executable file
97
content/en/shortcodes/youtube.md
Executable file
@ -0,0 +1,97 @@
|
||||
---
|
||||
title: YouTube
|
||||
description: Embed a YouTube video in your content using the youtube shortcode.
|
||||
categories: [shortcodes]
|
||||
keywords: []
|
||||
menu:
|
||||
docs:
|
||||
parent: shortcodes
|
||||
weight:
|
||||
weight:
|
||||
toc: true
|
||||
---
|
||||
|
||||
{{% note %}}
|
||||
To override Hugo's embedded `youtube` shortcode, copy the [source code] to a file with the same name in the `layouts/shortcodes` directory.
|
||||
|
||||
[source code]: {{% eturl youtube %}}
|
||||
{{% /note %}}
|
||||
|
||||
## Example
|
||||
|
||||
To display a YouTube video with this URL:
|
||||
|
||||
```text
|
||||
https://www.youtube.com/watch?v=0RKpf3rK57I
|
||||
```
|
||||
|
||||
Include this in your Markdown:
|
||||
|
||||
```text
|
||||
{{</* youtube 0RKpf3rK57I */>}}
|
||||
```
|
||||
|
||||
Hugo renders this to:
|
||||
|
||||
{{< youtube 0RKpf3rK57I >}}
|
||||
|
||||
## Arguments
|
||||
|
||||
id
|
||||
: (`string`) The video `id`. Optional if the `id` is provided as a positional argument as shown in the example above.
|
||||
|
||||
allowFullScreen
|
||||
{{< new-in 0.125.0 >}}
|
||||
: (`bool`) Whether the `iframe` element can activate full screen mode. Default is `true`.
|
||||
|
||||
autoplay
|
||||
{{< new-in 0.125.0 >}}
|
||||
: (`bool`) Whether to automatically play the video. Forces `mute` to `true`. Default is `false`.
|
||||
|
||||
class
|
||||
: (`string`) The `class` attribute of the wrapping `div` element. When specified, removes the `style` attributes from the `iframe` element and its wrapping `div` element.
|
||||
|
||||
controls
|
||||
{{< new-in 0.125.0 >}}
|
||||
: (`bool`) Whether to display the video controls. Default is `true`.
|
||||
|
||||
end
|
||||
{{< new-in 0.125.0 >}}
|
||||
: (`int`) The time, measured in seconds from the start of the video, when the player should stop playing the video.
|
||||
|
||||
loading
|
||||
{{< new-in 0.125.0 >}}
|
||||
: (`string`) The loading attribute of the `iframe` element, either `eager` or `lazy`. Default is `eager`.
|
||||
|
||||
loop
|
||||
{{< new-in 0.125.0 >}}
|
||||
: (`bool`) Whether to indefinitely repeat the video. Ignores the `start` and `end` arguments after the first play. Default is `false`.
|
||||
|
||||
mute
|
||||
{{< new-in 0.125.0 >}}
|
||||
: (`bool`) Whether to mute the video. Always `true` when `autoplay` is `true`. Default is `false`.
|
||||
|
||||
start
|
||||
{{< new-in 0.125.0 >}}
|
||||
: (`int`) The time, measured in seconds from the start of the video, when the player should start playing the video.
|
||||
|
||||
title
|
||||
: (`string`) The `title` attribute of the `iframe` element. Defaults to "YouTube video".
|
||||
|
||||
Example using some of the above:
|
||||
|
||||
```text
|
||||
{{</* youtube id=0RKpf3rK57I start=30 end=60 loading=lazy */>}}
|
||||
```
|
||||
|
||||
## Privacy
|
||||
|
||||
Adjust the relevant privacy settings in your site configuration.
|
||||
|
||||
{{< code-toggle config=privacy.youTube />}}
|
||||
|
||||
disable
|
||||
: (`bool`) Whether to disable the shortcode. Default is `false`.
|
||||
|
||||
privacyEnhanced
|
||||
: (`bool`) Whether to block YouTube from storing information about visitors on your website unless the user plays the embedded video. Default is `false`.
|
||||
@ -415,8 +415,8 @@ The same inline shortcode can be reused later in the same content file, with dif
|
||||
[`Name`]: /methods/shortcode/name/
|
||||
[`Position`]: /methods/shortcode/position/
|
||||
[built-in shortcode]: /content-management/shortcodes/
|
||||
[figure]: /content-management/shortcodes/#figure
|
||||
[figure]: /shortcodes/figure/
|
||||
[lookup order]: /templates/lookup-order/
|
||||
[source organization]: /getting-started/directory-structure/
|
||||
[vimeoexample]: #single-flexible-example-vimeo
|
||||
[youtubeshortcode]: /content-management/shortcodes/#youtube
|
||||
[youtubeshortcode]: /shortcodes/youtube/
|
||||
|
||||
@ -1669,6 +1669,10 @@ config:
|
||||
disable: false
|
||||
enableDNT: false
|
||||
simple: false
|
||||
x:
|
||||
disable: false
|
||||
enableDNT: false
|
||||
simple: false
|
||||
youTube:
|
||||
disable: false
|
||||
privacyEnhanced: false
|
||||
@ -1748,6 +1752,8 @@ config:
|
||||
limit: -1
|
||||
twitter:
|
||||
disableInlineCSS: false
|
||||
x:
|
||||
disableInlineCSS: false
|
||||
sitemap:
|
||||
changeFreq: ""
|
||||
disable: false
|
||||
|
||||
@ -30,11 +30,15 @@
|
||||
'gist' = 'shortcodes/gist.html'
|
||||
'highlight' = 'shortcodes/highlight.html'
|
||||
'instagram' = 'shortcodes/instagram.html'
|
||||
'instagram_simple' = 'shortcodes/instagram_simple.html'
|
||||
'param' = 'shortcodes/param.html'
|
||||
'qr' = 'shortcodes/qr.html'
|
||||
'ref' = 'shortcodes/ref.html'
|
||||
'relref' = 'shortcodes/relref.html'
|
||||
'twitter' = 'shortcodes/twitter.html'
|
||||
'twitter_simple' = 'shortcodes/twitter_simple.html'
|
||||
'vimeo' = 'shortcodes/vimeo.html'
|
||||
'vimeo_simple' = 'shortcodes/vimeo_simple.html'
|
||||
'x' = 'shortcodes/x.html'
|
||||
'x_simple' = 'shortcodes/x_simple.html'
|
||||
'youtube' = 'shortcodes/youtube.html'
|
||||
|
||||
4
layouts/shortcodes/hl.html
Normal file
4
layouts/shortcodes/hl.html
Normal file
@ -0,0 +1,4 @@
|
||||
{{ $code := .Inner | strings.TrimSpace }}
|
||||
{{ $lang := or (.Get 0) "go" }}
|
||||
{{ $opts := dict "hl_inline" true "noClasses" true }}
|
||||
{{ transform.Highlight $code $lang $opts }}
|
||||
Loading…
x
Reference in New Issue
Block a user