# Markdown basics & typography > Headings, lists, tables, code, footnotes, quotes - how the theme renders standard Markdown. _Source: https://theme.docs.tbsch.de/post/2026-01-12-markdown-basics-typography/ · As of: 2026-01-12_ 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 #

## 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](/post/2026-02-23-welcome/); 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 😎.

A paragraph with an external link - it opens in a new tab and carries its icon.

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:

Step one
Step two
Step three

Task list:

Theme installed
Demo read
Own site built

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](/post/2026-01-19-admonitions-callout-boxes/) - a plain blockquote is passed through unchanged by the blockquote render hook:

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

> 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

| 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¹ are placed at the end and linked - and additionally appear as a popover when you hover a footnote reference like this one² with the mouse or focus it via keyboard.

This is the first footnote. ↩︎
And this is the second, with a link. ↩︎

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.

A horizontal rule separates sections:

---

That's it for the basics.