example

Hugo-Tufte Features compatibility

Author Name — Fri, 06 Feb 2026 13:56:01 -0800

This is a quick demonstration post. It serves as an example of the features of this theme. One of them is $\LaTeX$ via Katex.

A Bit About Mathematics

This is an example of an epigraph with some math $\mathbb N \subseteq \mathbb R$ to start the beginning of a section.
Shawn O'Hare, Math is Fun, p.8

Inline

Some inline math: This is Marginpar. $e^{i \pi} = -1$ and $\sqrt{-1} = i$ and $a_2 = 3$ .

Display

And display math using this symbol $$: This is Marginnote with counter like footnote.

-- \cdot_H -- \colon B(G,H) \times B(H, K) \to B(G, K), \quad ([X], [Y]) \mapsto [X \times_H Y].

Environments

Currently, certain $\LaTeX$ environments need to be escaped so that the markdown processor does not override Katex. Currently, display environments should be enclosed in <p> tags and blank lines. For instance:

$$ \begin{aligned} \mu(A) &= \iint_{I^2} \chi_A (x,y) \ d(x,y) = \int_I \left( \int_I \chi_A (x,y) \ dx\right) dy = \int_I 0 \ dy= 0 \quad \text{and} \\ \mu(A) &=\iint_{I^2} \chi_A (x,y) \ d(x,y) = \int_I \left( \int_I \chi_A (x,y) \ dy \right) dx =\int_I dx = 1, \end{aligned} $$

is produced from

<p>
$$
\begin{aligned}
 \mu(A) &= \iint_{I^2} \chi_A (x,y) \ d(x,y)
 = \int_I \left( \int_I \chi_A (x,y) \ dx\right) dy
 = \int_I 0 \ dy= 0 \quad \text{and} \\
 \mu(A) &=\iint_{I^2} \chi_A (x,y) \ d(x,y)
 = \int_I \left( \int_I \chi_A (x,y) \ dy \right) dx
 =\int_I dx = 1,
\end{aligned}
$$
</p>

Blockquotes shortcode also eliminated

This is suppose to be {{< blockquotes >}}, instead we use {{< epigraph >}} shortcode. But first, we try to manually cite via This is between cite tags and has math: $e^x$

This is a blockquote with two paragraphs, that employs the theme’s blockquote shortcode. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Shawn O'Hare, www.shawnohare.com

Code

As an example of some inline code: go test -v -short. And this is some block-code:

199
200
201
202
203
204
205
206
207
208
209
210
211


package main

import "log"

func add(x int, y int) int {
 log.Println("We are going to take the sum of two numbers, and leave a long comment.")
 return x + y
}

func main() {
 y := add(1, 2)
 log.Println(y)
}

Here’s an example without line numbers.

package main

import "log"

func add(x int, y int) int {
 log.Println("We are going to take the sum of two numbers, and leave a very very very long comment.")
 return x + y
}

func main() {
 y := add(1, 2)
 log.Println(y)
}

Figure

Below we have an example of a regular width figure.

The image title. This is the image caption. Image attribution

The image title. This is the image caption. Image attribution But tight integration of graphics with text is central to Tufte’s work even when those graphics are ancillary to the main body of a text. In many of those cases, a margin figure may be most appropriate.

Below is a full-width figure.

Napoleonic wars This the image caption. Image attribution

A Story About Cats

Climb a tree, wait for a fireman jump to fireman then scratch his face sleep on dog bed, force dog to sleep on floor cat snacks, and eat prawns daintily with a claw then lick paws clean wash down prawns with a lap of carnation milk then retire to the warmest spot on the couch to claw at the fabric before taking a catnap climb a tree, wait for a fireman jump to fireman then scratch his face put toy mouse in food bowl run out of litter box at full speed . See owner, run in terror chase mice, so thinking longingly about tuna brine for eat a plant, kill a hand for wake up human for food at 4am. Human is washing you why halp oh the horror flee scratch hiss bite scratch the furniture and rub face on owner. Loves cheeseburgers see owner, run in terror chew on cable. Thug cat ignore the squirrels, you’ll never catch them anyway. Eat a plant, kill a hand find empty spot in cupboard and sleep all day so hide head under blanket so no one can see yet love to play with owner’s hair tie rub face on everything i like big cats and i can not lie. Wake up human for food at 4am stare at the wall, play with food and get confused by dust yet then cats take over the world scamper. Inspect anything brought into the house get video posted to internet for chasing red dot. Brown cats with pink ears chew foot spit up on light gray carpet instead of adjacent linoleum. I am the best wake up human for food at 4am, meow spread kitty litter all over house, for meow. Knock dish off table head butt cant eat out of my own dish jump off balcony, onto stranger’s head, chase ball of string scream at teh bath but climb leg, so unwrap toilet paper but destroy couch. Climb a tree, wait for a fireman jump to fireman then scratch his face. Leave hair everywhere swat turds around the house eat grass, throw it back up, and eat grass, throw it back up. Chase after silly colored fish toys around the house.

We really like cats.

Yes, they are fluffy and happy.

Authoring Stage Taxonomy for Digital Garden

Author Name — Mon, 28 Jul 2025 00:00:00 +0000

This theme supports custom taxonomy and growth stage indicators. By default seedling, budding and evergreen will have predefined indicator.

But fist, it must be manually set up as follows:

[taxonomies]
 stage = "stage"

Create taxonomy folder and it’s terms _index.md:

mysite/
 ├── ...
 ├── content/
 │ └── stage/
 │ ├─ seedling/
 │ │ └─ _index.md
 │ ├─ budding/
 │ │ └─ _index.md
 │ └─ evergreen/
 │ └─ _index.md
 └── ...

Within _index.md, Set the stage title and translationKey if site is multilingual, you can also override custom indicator or emoji:

---
title: 'Stage of me being Godzilla'
translationKey: godzilla
emoji: '🦖'
# indicator: 'https://example.com/indicator.svg'
---

You can write the introduction or blah blah blah here

Add the stage parameter into your post index.md:

---
title: 'My Post'
stage: 'seedling'
---

Authoring Cover Images and Audio Articles

Author Name — Sat, 22 Feb 2025 00:00:00 +0000

Adding Cover Images

Assign The Cover Images

To add a cover image to your article, you have two options:

Front Matter Method

You can use either cover or images parameter for the images source. And alt, coverAlt or imagesAlt parameter for alt text.

---
title: "My Article"
images: "images/my-cover.jpg"
alt: "Description of the images"
---

Page Bundle Method

Create a folder for your post
Name your image cover.*
Place it in the same folder as your content
Set the alt text in your post frontmatter

Place The Cover

You can place your featured images in various layout, anywhere on article content with {{< figure >}} shortcode:

{{< figure src="cover" caption="alt" >}}

This is freedom of authoring!

Cat named Cooper with styrofoam on his fur due to electrostatic charge.

Adding Audio Articles

Front Matter Method

---
title: "My Article"
audio: "audio/my-audio.ogg"
---

Page Bundle Method

You can upload multiple audio format with this method:

Create a folder for your post
Name your audio audio.*
Place it in the same folder as your content

Page Bundle Method Examples

Here’s how your folder structure should look:

content/
└── posts/
 └── my-article/
 ├── index.md
 ├── cover.jpg
 ├── audio.mp3
 └── audio.ogg

Authoring Terms Entry

Author Name & A.N. Other — Mon, 03 Feb 2025 00:00:00 +0000

You can change the cover of each terms entry by adding the cover parameter in _index.md under [lang]\[taxonomies]\[terms]\. For example, to set the cover of the term configuration in categories, add the parameter in content\en\categories\configuration\_index.md.

---
title: "Configuration"
description: "Configuration description, this might be useful for HTML metadata"
cover: "https://example.com/cover.png"
translationKey: configuration
---

If something is written here, the text will be displayed as hero section.

To link the terms entry in another language, you can add the translationKey parameter. For example, if you want to link the terms entry in Indonesian, add the parameter in content\id\categories\konfigurasi\_index.md.

---
title: "Konfigurasi"
description: "Deskripsi konfigurasi, ini bisa berguna untuk metadata HTML"
cover: "https://example.com/cover.png"
translationKey: configuration
---

Jika ada teks yang ditulis di sini, teks akan ditampilkan sebagai bagian hero.

The same way, you can set the cover of each terms entry for series and author taxonomies. After making these changes, rebuild your site to see the updated cover and translations in breadcrumbs. The cover will replace the flowlines images on taxonomies listing.

Markdown Test

Author Name — Sun, 26 Jan 2025 00:00:00 +0000

This is example of span with letterine class. You need set the markup.goldmark.unsafe and markup.goldmark.renderer.unsafe parameter in config.toml to write html directly, but this is not recommended. And this is marginpar. Bold text, Italic text, Bold and italic text, ~~Strikethrough text~~, and Link —also works. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

\displaystyle \oint \vec{F} \cdot d\vec{s}=0

Please note that while the marginpar support MathML, the display and counter may not works as intended. Please use KaTeX or MathJax instead.

This page do not load with KaTeX nor MathJax script, While all equations on this page is native MathML, the browser supports may vary.

\displaystyle \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} \equiv 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }

Heading 2

First paragraph will not indent. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Second paragraph and after will indent. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a blockquote

Nested blockquote

Heading 3

Example table on marginpar shortcode with "abs" attribute to support flowing content:

Number		Alphabeth
16	14	A
10	16	B
14	10	C

Ordered list item 1
Ordered list item 2
- Nested unordered item
- Another nested item
Ordered list item 3

Unordered list item
Another item
- Nested item
- Another nested item

Heading 4

Header 1	Header 2
Cell 1	Cell 2
Cell 3	Cell 4

Task list:

Completed task
Incomplete task

Heading 5

Here’s some inline code and some combined formatting.

Here’s some block code:

// code block with four space
def hello_world():
 print("Hello, World!")

// Code block with syntax highlighting
function greeting(name) {
 return `Hello, ${name}!`;
}

Heading 6

Heading level 6 will show as inline paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

\displaystyle f(n) = \begin{cases} \frac{n}{2}, & \text{if } n\text{ is even} \\ 3n+1, & \text{if } n\text{ is odd} \end{cases}