Markdown basics & typography

This post shows how the theme renders perfectly ordinary Markdown - the reading typography, the table of contents (on the left when there is enough room) and the direct links on every heading are all generated automatically.

Every example comes with two tabs: Markdown shows the rendered result, Raw the source behind it.

Headings & table of contents #

# H1 is reserved for the page title (the theme renders it in the hero) - content therefore starts at ##. This post’s own ## headings end up in the table of contents and get a direct link (anchor) on hover; the depth is controlled by tableOfContents in markup.yaml (H2–H4 here). The demo headings inside the tab are rendered in isolation and keep the table of contents clean.

## Heading H2

### Heading H3

#### Heading H4

##### Heading H5

###### Heading H6

Text formatting #

Internal links are best set via the relref shortcode - like this one to the welcome post; external links open in a new tab and automatically get a matching icon (the URL→icon mapping lives in data/link-icons.yaml).

Text can be **bold**, *italic*, ***both***, ~~struck through~~ or set as
`inline code`. Emojis work as well :sunglasses:.

A paragraph with an [external link](https://gohugo.io) - it opens in a new
tab and carries its icon.

Lists #

Unordered:

- First item
- Second item
  - Nested
  - Another one
- Third item

Ordered:

1. Step one
2. Step two
3. Step three

Task list:

- [x] Theme installed
- [x] Demo read
- [ ] Own site built

Quotes #

For coloured callout boxes see the post Admonitions - a plain blockquote is passed through unchanged by the blockquote render hook:

> A plain blockquote. Multiple lines are joined into a single paragraph.

Tables #

| Feature | Default | Overridable per page |
| --- | :---: | :---: |
| Table of contents | on | yes |
| Reading time | on | yes |
| Related posts | on | yes |
| Sharing bar | on | yes |

Code #

Inline code like hugo server sits in the middle of the text. Code blocks are highlighted class-based with Chroma, so the light and dark palettes can be shipped separately:

// A small example
package main

import "fmt"

func main() {
    fmt.Println("Hello from the tbsch theme!")
}

# A post's front matter
title: "My post"
date: 2026-01-01
tags: ["hugo", "theme"]

@@ config @@
-baseURL = "https://old.example"
+baseURL = "https://tbsch.de"
 languageCode = "en"

```go
// A small example
package main

import "fmt"

func main() {
    fmt.Println("Hello from the tbsch theme!")
}
```

```yaml
# A post's front matter
title: "My post"
date: 2026-01-01
tags: ["hugo", "theme"]
```

```diff
@@ config @@
-baseURL = "https://old.example"
+baseURL = "https://tbsch.de"
 languageCode = "en"
```

Footnotes #

Footnotes are placed at the end of the text and linked - and additionally appear as a popover when you hover a reference with the mouse or focus it via keyboard. (Inside the tab, the footnote list renders at the end of the tab content; in a real post it sits at the end of the post.)

Markdown footnotes[^1] are placed at the end and linked - and additionally
appear as a popover when you hover a footnote reference like this one[^2]
with the mouse or focus it via keyboard.

[^1]: This is the first footnote.
[^2]: And this is the second, with a [link](https://gohugo.io/content-management/shortcodes/).

Dividers #

A horizontal rule separates sections:

---

That's it for the basics.