Text formatting

The original Hextra theme, and custom shortcodes added for this site are listed below for your quick reference when contributing.

Markdown

All files on this site are written in Markdown. See the Markdown Guide for basic rules and syntax.

Code

See the Hugo documentation for all code highlight options.

Below is the configuration file for the Developer Center. Notice that line number highlighting has been included to indicate that the application name (devcenter) is defined both under applications and for the primary upstream route.

.upsun/config.yaml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
applications:
  devcenter:
    source:
      root: dev
    stack:
      - nodejs@22
      - nodePackages.npm
      - python312
      - hugo
    hooks:
      build: |
        npm install
        npm run build         
    web:
      locations:
        /:
          root: "public"
          passthru: true
          index:
            - index.html

routes:
  "https://{default}/":
    type: upstream
    primary: true
    upstream: "devcenter:http"
  "https://www.{default}":
    type: redirect
    to: "https://{default}/"

```yaml {filename=".upsun/config.yaml" lineNos="true" lineNoStart="1" hl_Lines="2 26"}
applications:
  devcenter:
    source:
      root: dev
    stack:
      - nodejs@22
      - nodePackages.npm
      - python312
      - hugo
    hooks:
      build: |
        npm install
        npm run build 
    web:
      locations:
        /:
          root: "public"
          passthru: true
          index:
            - index.html

routes:
  "https://{default}/":
    type: upstream
    primary: true
    upstream: "devcenter:http"
  "https://www.{default}":
    type: redirect
    to: "https://{default}/"
```

.upsun/config.yaml

applications:
  devcenter:
    source:
      root: dev
    stack:
      - nodejs@22
      - nodePackages.npm
      - python312
      - hugo
    hooks:
      build: |
        npm install
        npm run build         
    web:
      locations:
        /:
          root: "public"
          passthru: true
          index:
            - index.html

routes:
  "https://{default}/":
    type: upstream
    primary: true
    upstream: "devcenter:http"
  "https://www.{default}":
    type: redirect
    to: "https://{default}/"

Callouts

A callout is a short piece of text intended to attract attention.

{{< callout >}}
  A **callout** is a short piece of text intended to attract attention.
{{< /callout >}}

{{< callout type="pink" >}}
  A **callout** is a short piece of text intended to attract attention.
{{< /callout >}}

{{< callout type="blue" >}}
  A **callout** is a short piece of text intended to attract attention.
{{< /callout >}}

{{< callout type="orange" >}}
  A **callout** is a short piece of text intended to attract attention.
{{< /callout >}}

{{< callout type="yellow" >}}
  A **callout** is a short piece of text intended to attract attention.
{{< /callout >}}

{{< callout type="success" >}}
  A **callout** is a short piece of text intended to attract attention.
{{< /callout >}}

{{< callout type="critical" >}}
  A **callout** is a short piece of text intended to attract attention.
{{< /callout >}}

Nesting

You can also include code blocks within callouts:

.upsun/config.yaml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
applications:
  devcenter:
    source:
      root: dev
    stack:
      - nodejs@22
      - nodePackages.npm
      - python312
      - hugo
    hooks:
      build: |
        npm install
        npm run build         
    web:
      locations:
        /:
          root: "public"
          passthru: true
          index:
            - index.html

routes:
  "https://{default}/":
    type: upstream
    primary: true
    upstream: "devcenter:http"
  "https://www.{default}":
    type: redirect
    to: "https://{default}/"

Take note of the shared application name devcenter used in the applications and routes configuration above. Pretty neat, huh?

Details

Details

This is the content of the details.

Markdown is supported.

Click me to reveal

This will be hidden by default.

{{% details title="Details" %}}

This is the content of the details.

Markdown is **supported**.

{{% /details %}}

{{% details title="Click me to reveal" closed="true" %}}

This will be hidden by default.

{{% /details %}}

Filetree

_index.md
- _index.md
- introduction.md
- introduction.fr.md

hugo.toml

Markdown

{{< filetree/container >}}
  {{< filetree/folder name="content" >}}
    {{< filetree/file name="_index.md" >}}
    {{< filetree/folder name="docs" state="closed" >}}
      {{< filetree/file name="_index.md" >}}
      {{< filetree/file name="introduction.md" >}}
      {{< filetree/file name="introduction.fr.md" >}}
    {{< /filetree/folder >}}
  {{< /filetree/folder >}}
  {{< filetree/file name="hugo.toml" >}}
{{< /filetree/container >}}

Icons

{{< icon "github" >}}

Adding icons

You need to add the SVG icon data to a data/icons.yaml file in this repository.

data/icons.yaml

your-icon: <svg>your icon svg content</svg>

It then can be used in the shortcode like this:

{{< icon "your-icon" >}}

The icon now can also be used in other shortcodes where an icon parameter is an option.

Steps

Note that steps using the h3 Markdown header appear in the table of contents in the upper right hand corner of this page.

Step 1

This is the first step.

Step 2

This is the second step.

Step 3

This is the third step.

{{% steps %}}

### Step 1

This is the first step.

### Step 2

This is the second step.

### Step 3

This is the third step.

{{% /steps %}}

Tabs

JSON: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.

YAML: YAML is a human-readable data serialization language.

TOML: TOML aims to be a minimal configuration file format that’s easy to read due to obvious semantics.

{{< tabs items="JSON,YAML,TOML" >}}

  {{< tab >}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{< /tab >}}
  {{< tab >}}**YAML**: YAML is a human-readable data serialization language.{{< /tab >}}
  {{< tab >}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{< /tab >}}

{{< /tabs >}}

Style guide