Browse Docs

Bootstrap Config Toggle Shortcode

HugoMods Authors March 24, 2023 2 min read Docs Bootstrap Shortcode Code Config Toggle TOML YAML JSON

Shortcode to generate code blocks in multiple languages from one code base, support TOML, JSON and YAML.

On this page
Donate
Bootstrap Config Toggle Shortcode

Syntax

1{{< bs/config-toggle >}}
2PUT YAML/TOML/JSON CODE HERE.
3{{< /bs/config-toggle >}}

Parameters

filename

PositionNameTypeRequiredDefaultSince
#0filenamestring---

The filename.

langs

PositionNameTypeRequiredDefaultSince
#1langsstring-toml,yaml,json-

The comma-separated target languages, can be used to exclude and sort languages.

style

PositionNameTypeRequiredDefaultSince
-stylestring-tabs-

Style: tabs, pills or underline.

fill

PositionNameTypeRequiredDefaultSince
-fillboolean-false-

When true the nav items take full width.

title

PositionNameTypeRequiredDefaultSince
-titlestring---

The title of configuration.

delimiter

PositionNameTypeRequiredDefaultSince
-delimiterboolean---

When true, wraps codes with delimiters.

Site Parameters

langs

NameTypeRequiredDefaultSince
langsarray-[&#34;toml&#34;, &#34;yaml&#34;, &#34;json&#34;]-

The target languages, can be used to exclude and sort languages globally.

hugo.yaml

1params:
2  bootstrap:
3    config_toggle:
4      langs:
5      - yaml
6      - toml
7      - json

hugo.toml

1[params]
2  [params.bootstrap]
3    [params.bootstrap.config_toggle]
4      langs = ['yaml', 'toml', 'json']

hugo.json

 1{
 2   "params": {
 3      "bootstrap": {
 4         "config_toggle": {
 5            "langs": [
 6               "yaml",
 7               "toml",
 8               "json"
 9            ]
10         }
11      }
12   }
13}

Examples

Filename Example

1{{< bs/config-toggle hello >}}
2{
3  "hello": "world"
4}
5{{< /bs/config-toggle >}}

hello.yaml

1hello: world

hello.toml

1hello = 'world'

hello.json

1{
2   "hello": "world"
3}

Exclude and Sort Languages

1{{< bs/config-toggle langs=json,toml >}}
2langs = ["toml", "json"]
3{{< /bs/config-toggle >}}
1{
2   "langs": [
3      "toml",
4      "json"
5   ]
6}

1langs = ['toml', 'json']

Hugo Configuration Example

1{{< bs/config-toggle filename=hugo title="Configuration" style=pills fill=true >}}
2module:
3  imports:
4    - path: github.com/hugomods/bootstrap
5{{< /bs/config-toggle >}}

hugo.yaml

1module:
2  imports:
3  - path: github.com/hugomods/bootstrap

hugo.toml

1[module]
2  [[module.imports]]
3    path = 'github.com/hugomods/bootstrap'

hugo.json

1{
2   "module": {
3      "imports": [
4         {
5            "path": "github.com/hugomods/bootstrap"
6         }
7      ]
8   }
9}

Hugo Front Matter Example

1{{< bootstrap/config-toggle title="Front Matter" delimiter=true >}}
2title: Hello World!
3{{< /bootstrap/config-toggle >}}
1---
2title: Hello World!
3---

1+++
2title = 'Hello World!'
3+++

1{
2   "title": "Hello World!"
3}
Collapse
Display