snippet

  3 minutes   mrBrutus  

The snippet shortcode can be used for re-using snippets or text sections – Create a text section once and insert it in many pages. Organize these snippets in one or more snippet bundles.

syntax:

{{< snippet bundle="<name-of-the-snippet-bundle>" file="<relative-path-of-the-snippet-file>" >}}
md
  • bundle must be passed the name of the snippets bundle
  • file must be passed the file path relative to the snippets bundle:
    • Without file extension for markdown files which shall be rendered as usual.
    • With file extension if the snippet shall be inserted as codeblock.

Usage

Place the snippet content in the snippets folder:

my-snippets/some-folder/my-sample-text.md:

This is a text used in many pages.

- lorem
- ipsum
md

Then use the shortcode throughout your pages:

---
title: some page
---

## Inserted text section

{{< snippet bundle="my-snippets" file="some-folder/my-sample-text" >}}

md

Content

The shortcode supports Markdown and source code.

Markdown snippets:

  • Are rendered as any other markdown content
  • May contain local images (stored in the snippets folder)
  • May include other shortcodes

Source code snippets:

  • Are rendered as code blocks
The language selection for the code block is taken from the file extension (e.g. yaml for <some-file.yaml>).

Snippets bundle

The snippets bundle must contain a _index.md with below front-matter so that none of the files in this bundle will be rendered as HTML pages.

my-snippets/_index.md:

---
title: my-snippets
cascade:
  _build:
    render: false
    list: false
    publishResources: false
---
md

Examples

1) Simple markdown snippet

The snippet in {{< snippet bundle="my-snippets" file="shortcode-docs/md-snippet1" >}} has the following content:

**Markdown snippet 1**

Magna veniam cupidatat ad eiusmod eu ad anim eu do.
Amet nulla reprehenderit dolore pariatur cupidatat
minim laborum. Elit sunt mollit ullamco pariatur sunt
aute adipisicing labore consectetur ut nisi aute.
Aliquip culpa dolore enim enim nulla officia veniam
voluptate commodo fugiat mollit proident deserunt.
Nostrud veniam incididunt consectetur sint reprehenderit
laboris. Ea consectetur qui reprehenderit ipsum incididunt
ipsum aliqua dolor do laborum ut ipsum. Ipsum quis elit
deserunt duis id voluptate amet sunt sunt ullamco commodo
irure fugiat ullamco.

md

Which renders as:

Markdown snippet 1

Magna veniam cupidatat ad eiusmod eu ad anim eu do. Amet nulla reprehenderit dolore pariatur cupidatat minim laborum. Elit sunt mollit ullamco pariatur sunt aute adipisicing labore consectetur ut nisi aute. Aliquip culpa dolore enim enim nulla officia veniam voluptate commodo fugiat mollit proident deserunt. Nostrud veniam incididunt consectetur sint reprehenderit laboris. Ea consectetur qui reprehenderit ipsum incididunt ipsum aliqua dolor do laborum ut ipsum. Ipsum quis elit deserunt duis id voluptate amet sunt sunt ullamco commodo irure fugiat ullamco.

2) Markdown snippet with note shortcode

The snippet in {{< snippet bundle="my-snippets" file="shortcode-docs/md-snippet2" >}} has the following content:

**Markdown snippet 2**

Nostrud ipsum nulla adipisicing cillum non anim veniam.
Anim anim culpa magna in nostrud id mollit fugiat anim sint
sint consequat voluptate magna. Ea id ad est aliqua
exercitation ullamco. Sint reprehenderit consequat cupidatat
deserunt nisi consectetur laborum. Adipisicing fugiat anim
fugiat exercitation velit ex minim est deserunt ea.

{{< note warning>}}
This is some warning message.
{{< /note >}}

md

Which renders as:

Markdown snippet 2

Nostrud ipsum nulla adipisicing cillum non anim veniam. Anim anim culpa magna in nostrud id mollit fugiat anim sint sint consequat voluptate magna. Ea id ad est aliqua exercitation ullamco. Sint reprehenderit consequat cupidatat deserunt nisi consectetur laborum. Adipisicing fugiat anim fugiat exercitation velit ex minim est deserunt ea.

This is some warning message.

3) Markdown snippet with image

The snippet in {{< snippet bundle="my-snippets" file="shortcode-docs/md-snippet3" >}} has the following content:

**Markdown snippet 3**

This is some markdown snippet with an image.

![test image](test.jpg "Some caption")

md

Which renders as:

Markdown snippet 3

This is some markdown snippet with an image.

test image
Some caption

4) Source code snippet

{{< snippet bundle="my-snippets" file="shortcode-docs/yaml-snippet1.yaml" >}} renders as:

key: value
list:
 - item1
 - item2
 - item3
yaml