Admonition

#

Admonitions allow you to insert eye-catching callout boxes in your content.

Admonitions serve a similar purpose as the alert shortcode but are implemented via Hugo render hooks. The key difference is syntax: admonitions use Markdown syntax, making them more portable across different platforms, whereas shortcodes are specific to Hugo. The syntax resembles GitHub alerts:

> [!TIP]
> A Tip type admonition.

The alert sign (+ or -) is optional to control whether the admonition is folded or not. Note that alert sign is only compatible in Obsidian.

1. 1

   Configure the theme

   Choose a colour scheme and homepage layout.
2. 2

   Write your content

   Use standard Markdown and shortcodes.

console.log("Hello");

print("Hello")

fmt.Println("Hello")

const add = (a, b) => a + b;

def add(a, b): return a + b

func add(a, b int) int { return a + b }

1. header

   badge test

   subheader

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus.
2. Another Awesome Header

   date - present

   Awesome Subheader

   With html code

   • Coffee
   • Tea
   • Milk
3. Shortcodes

   AWESOME

   With other shortcodes

   

Example #1:

{{< list limit=2 >}}

Example #2:

{{< list title="Samples" cardView=true limit=6 where="Type" value="sample" >}}

LTR/RTL

#

ltr and rtl allows you to mix your contents. Many RTL language users want to include parts of the content in LTR. Using this shortcode will let you do so, and by leveraging % as the outer-most dilemeter in the shortcode Hugo shortcodes, any markdown inside will be rendered normally.

Example:

- This is an markdown list.
- Its per default a LTR direction
{{% rtl %}}
- هذه القائمة باللغة العربية
- من اليمين الى اليسار
{{% /rtl %}}

• This is an markdown list.
• Its per default a LTR direction

Mermaid

#

mermaid allows you to draw detailed diagrams and visualisations using text. It uses Mermaid under the hood and supports a wide variety of diagrams, charts and other output formats.

Simply write your Mermaid syntax within the mermaid shortcode and let the plugin do the rest.

Refer to the official Mermaid docs for details on syntax and supported diagram types.

Example:

{{< mermaid >}}
graph LR;
A[Lemons]-->B[Lemonade];
B-->C[Profit]
{{< /mermaid >}}

graph LR;
A[Lemons]-->B[Lemonade];
B-->C[Profit]

Stats

#

Use stats and stat to present concise, high-signal metrics in a responsive grid. The grid uses three columns on large screens by default, or four with columns="4".

{{< stats >}}
{{< stat value="40+" label="Shortcodes" >}}Compose pages without bespoke templates.{{< /stat >}}
{{< stat value="100%" label="Portable" >}}Keep your content in Markdown.{{< /stat >}}
{{< stat value="0" label="Required plugins" >}}Start with Hugo and Blowfish.{{< /stat >}}
{{< /stats >}}

Steps

#

Use steps and step for onboarding, processes, roadmaps, and tutorials.

{{< steps >}}
{{< step number="1" title="Configure the theme" >}}Choose a colour scheme and homepage layout.{{< /step >}}
{{< step number="2" title="Write your content" >}}Use standard Markdown and shortcodes.{{< /step >}}
{{< /steps >}}

1. 1

   Configure the theme

   Choose a colour scheme and homepage layout.
2. 2

   Write your content

   Use standard Markdown and shortcodes.

Swatches

#

swatches outputs a set of up to three different colors to showcase color elements like a color palette. This shortcode takes the HEX codes of each color and creates the visual elements for each.

Example

{{< swatches "#64748b" "#3b82f6" "#06b6d4" >}}

Output

Tabs

#

The tabs shortcode is commonly used to present different variants of a particular step. For example, it can be used to show how to install VS Code on different platforms.

Example 1: Basic Usage

{{< tabs >}}

    {{< tab label="Windows" >}}
    Install using Chocolatey:

    ```pwsh
    choco install vscode.install
    ```

    or install using WinGet

    ```pwsh
    winget install -e --id Microsoft.VisualStudioCode
    ```
    {{< /tab >}}

    {{< tab label="macOS" >}}
    ```bash
    brew install --cask visual-studio-code
    ```
    {{< /tab >}}

    {{< tab label="Linux" >}}
    {{< alert >}}See [documentation](https://code.visualstudio.com/docs/setup/linux#_install-vs-code-on-linux).{{< /alert >}}
    {{< /tab >}}

{{< /tabs >}}

Output

choco install vscode.install

winget install -e --id Microsoft.VisualStudioCode

brew install --cask visual-studio-code

Nested shortcodes are supported with the default Markdown behaviour. For example, an accordion can live inside a tab without its generated HTML being rendered as Markdown a second time:

{{< tabs >}}
{{< tab label="Details" >}}
{{< accordion mode="open" >}}
{{< accordionItem title="What is included?" >}}
- Responsive behaviour
- Accessible markup
{{< /accordionItem >}}
{{< /accordion >}}
{{< /tab >}}
{{< /tabs >}}

Example 2: With Group, Default, and Icon

{{< tabs group="lang" default="Python" >}}
    {{< tab label="JavaScript" icon="code" >}}
    ```javascript
    console.log("Hello");
    ```
    {{< /tab >}}

    {{< tab label="Python" icon="sun" >}}
    ```python
    print("Hello")
    ```
    {{< /tab >}}

    {{< tab label="Go" icon="moon" >}}
    ```go
    fmt.Println("Hello")
    ```
    {{< /tab >}}
{{< /tabs >}}

{{< tabs group="lang" default="Python" >}}
    {{< tab label="JavaScript" icon="code" >}}
    ```javascript
    const add = (a, b) => a + b;
    ```
    {{< /tab >}}

    {{< tab label="Python" icon="sun" >}}
    ```python
    def add(a, b): return a + b
    ```
    {{< /tab >}}

    {{< tab label="Go" icon="moon" >}}
    ```go
    func add(a, b int) int { return a + b }
    ```
    {{< /tab >}}
{{< /tabs >}}

Output

console.log("Hello");

print("Hello")

fmt.Println("Hello")

const add = (a, b) => a + b;

def add(a, b): return a + b

func add(a, b int) int { return a + b }

In this example, both tab groups share the same group="lang" parameter, so clicking any tab will synchronize both groups. The default="Python" parameter makes Python the initially active tab, and icon="code" adds an icon before each label.

1. 1

   Configure the theme

   Choose a colour scheme and homepage layout.
2. 2

   Write your content

   Use standard Markdown and shortcodes.

In this example, both tab groups share the same group="lang" parameter, so clicking any tab will synchronize both groups. The default="Python" parameter makes Python the initially active tab, and icon="code" adds an icon before each label.

Timeline

#

The timeline creates a visual timeline that can be used in different use-cases, e.g. professional experience, a project’s achievements, etc. The timeline shortcode relies on the timelineItem sub-shortcode to define each item within the main timeline. Each item can have the following properties.

Example:

{{< timeline >}}

{{< timelineItem icon="github" header="header" badge="badge test" subheader="subheader" >}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus. 
{{< /timelineItem >}}


{{< timelineItem icon="code" header="Another Awesome Header" badge="date - present" subheader="Awesome Subheader" >}}
With html code
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
{{< /timelineItem >}}

{{< timelineItem icon="star" header="Shortcodes" badge="AWESOME" >}}
With other shortcodes
{{< gallery >}}
  <img src="gallery/01.jpg" class="grid-w33" />
  <img src="gallery/02.jpg" class="grid-w33" />
  <img src="gallery/03.jpg" class="grid-w33" />
  <img src="gallery/04.jpg" class="grid-w33" />
  <img src="gallery/05.jpg" class="grid-w33" />
  <img src="gallery/06.jpg" class="grid-w33" />
  <img src="gallery/07.jpg" class="grid-w33" />
{{< /gallery >}}
{{< /timelineItem >}}

{{< timelineItem icon="code" header="Another Awesome Header">}}
{{< github repo="nunocoracao/blowfish" >}}
{{< /timelineItem >}}

{{< /timeline >}}

1. header

   badge test

   subheader

   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non magna ex. Donec sollicitudin ut lorem quis lobortis. Nam ac ipsum libero. Sed a ex eget ipsum tincidunt venenatis quis sed nisl. Pellentesque sed urna vel odio consequat tincidunt id ut purus. Nam sollicitudin est sed dui interdum rhoncus.
2. Another Awesome Header

   date - present

   Awesome Subheader

   With html code

   • Coffee
   • Tea
   • Milk
3. Shortcodes

   AWESOME

   With other shortcodes

   

TypeIt

#

TypeIt is the most versatile JavaScript tool for creating typewriter effects on the planet. With a straightforward configuration, it allows you to type single or multiple strings that break lines, delete & replace each other, and it even handles strings that contain complex HTML.

Blowfish implements a sub-set of TypeIt features using a shortcode. Write your text within the typeit shortcode and use the following parameters to configure the behavior you want.

Example 1:

{{< typeit >}}
Lorem ipsum dolor sit amet 
{{< /typeit >}}

Example 2:

{{< typeit 
  tag=h1
  lifeLike=true
>}}
Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. 
{{< /typeit >}}

Example 3:

{{< typeit 
  tag=h3
  speed=50
  breakLines=false
  loop=true
>}}
"Frankly, my dear, I don't give a damn." Gone with the Wind (1939)
"I'm gonna make him an offer he can't refuse." The Godfather (1972)
"Toto, I've a feeling we're not in Kansas anymore." The Wizard of Oz (1939)
{{< /typeit >}}

Video

#

Blowfish includes a video shortcode for embedding local or external videos in content. The shortcode renders a <figure> wrapper with a responsive video player and an optional caption.

The video shortcode accepts the following parameters:

If the browser cannot play the video, the player will show a minimal English fallback message with a download link.

Example:

{{< video
    src="https://upload.wikimedia.org/wikipedia/commons/5/5a/CC0_-_Public_Domain_Dedication_video_bumper.webm"
    poster="https://upload.wikimedia.org/wikipedia/commons/e/e0/CC0.jpg"
    caption="**Public domain demo** — CC0 video and poster."
    loop=true
    muted=true
>}}

Youtube Lite

#

A shortcut to embed youtube videos using the lite-youtube-embed library. This library is a lightweight alternative to the standard youtube embeds, and it’s designed to be faster and more efficient.

Example 1:

{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" >}}

Example 2:

You can use all of Youtube’s player parameters for the params variable, as demonstrated below:

This video will start after 130 seconds (2m10)

{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" params="start=130" >}}

This video will not have UI controls, will start playing at 130 seconds and will stop 10 seconds later.

To concatenate multiple options as shown below, you need to add the & character between them.

{{< youtubeLite id="SgXhGb-7QbU" label="Blowfish-tools demo" params="start=130&end=10&controls=0" >}}

More informations can be found on the youtubeLite GitHub repo and Youtube’s player parameters page.

Ò