Markdown Boilerplate with Sidenotes

This document demonstrates all standard Markdown features along with proper sidenote usage. This resource is the central reference for all content creators building a Digital Garden or implementing the Zettelkasten Method.

Basic Typography

Effective typography forms the foundation of digital writing. As explained by ¹(Lee et al. 2023), consistent formatting improves readability. Recent studies ²(Garcia & Williams, 2022) show that proper formatting significantly impacts user engagement. As demonstrated in previous research ², this approach has been validated multiple times.

Modern web development has evolved significantly ³(Zhang et al., 2023). This evolution continues to shape how we build websites ³ and manage content ⁴(Brown ).

Sidenotes work great with lists to provide additional context for specific items without breaking the list flow ⁵(Smith & Doe, 2020). Pay attention to this line. Sidenotes work great with lists to provide additional context. Sidenotes work great with lists to provide additional context. Sidenotes work great with lists to provide additional context. Sidenotes work great with lists to provide additional context. Sidenotes work great with lists to provide additional context. Sidenotes work great with lists to provide additional context.

Bold text and italic text are straightforward. You can also have bold italic text and ~~strikethrough~~ ^a. Sidenotes work great with lists to provide additional context. Sidenotes work great with lists to provide additional context. Sidenotes work great with lists to provide additional context. Sidenotes work great with lists to provide additional context. Sidenotes work great with lists to provide additional context. Sidenotes work great with lists to provide additional context.

Plain text with a sidenote. ^b

For academic applications of these formatting techniques, see our Academic Writing guide. ⁶(Johnson, 2019)

Headings

Above was an H2. Here are other levels, crucial for content organization:

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Lists

Lists are essential your Personal Knowledge Base ⁵. Lists are essential for structuring information in your PKB

Unordered Lists

Item one
Item two
- Nested item a
- Nested item b
Item three

Ordered Lists

First item
Second item
1. Nested item 1
2. Nested item 2
Third item

Task Lists

Completed task
Incomplete task
Another task

Links and Images

External link and internal link

Code

Inline code is wrapped with backticks. Modern web development practices ³ emphasize the importance of clean, well-documented code. This has been consistently shown in the literature ⁷(Miller et al. 2022).

# Code block with syntax highlighting
def hello_world():
    print("Hello, world!")

Blockquotes and Special Quotes

This is a standard blockquote.
It can span multiple lines.

Important: Always backup your data before making significant changes to your system. This warning helps ensure you don’t lose important work.

Tip: You can combine multiple markdown elements within these quote containers, including bold text, italic text, and even inline code.

Tables

Header 1	Header 2	Header 3
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

Horizontal Rule

Advanced Sidenote Usage

According to ⁴, effective content management requires careful consideration of information architecture. Recent performance studies ⁷ have shown that proper content organization significantly impacts site performance. These findings align with earlier research ⁵.

Plain text with a sidenote. ^g

Complex paragraph with multiple concepts that benefit from sidenotes.^h The text continues here with more information that might need explanation.ⁱ

Sidenotes with References

Academic-style writing often uses sidenotes for citations.¹^j

Math Expressions

This theme supports mathematical expressions using MathJax rendering. Important: Make sure to add math = true to your page’s frontmatter to enable math rendering.

Math Syntax Guidelines

For math to render properly in Hugo:

Use single dollar signs $...$ for inline math
Use double dollar signs $$...$$ for display (block) math
Use single backslashes \ for LaTeX commands (not double \\)
Line breaks in equations use \\ (double backslashes)
Dollar signs are handled properly when delimiters match between Hugo and MathJax

Inline Math

Inline math is wrapped with single dollar signs: $E = m c^{2}$ , $α + β = γ$ , $\bar{x} = \frac{1}{n} \sum_{i = 1}^{n} x_{i}$

Inline math integrates seamlessly with your text flow for simple expressions and variables. The syntax is $E = mc^2$ which renders as $E = m c^{2}$ .

Block Math

For standalone equations, use double dollar signs:

$\frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a}$

Equation Arrays and Alignment

For multiple aligned equations:

$\begin{aligned} f (x) & = (a + b)^{2} & = a^{2} + 2 a b + b^{2} \end{aligned}$

Matrices

$(\begin{matrix} a & b c & d \end{matrix}) [\begin{matrix} x y \end{matrix}] = [\begin{matrix} a x + b y c x + d y \end{matrix}]$

Complex Notation

$∭_{V} \vec{F} \cdot d \vec{v} = \oiint_{S} \vec{F} \cdot d \vec{S}$

The above is Gauss’s divergence theorem, showing volume integrals can be converted to surface integrals. Complex mathematical expressions benefit from sidenotes that explain the concepts without cluttering the formula.

Numbered Equations

$\begin{matrix} (1) & E = m c^{2} \end{matrix}$

Chemical Equations

Chemical equations use standard LaTeX chemistry notation with MathJax:

$H_{2} O + {CO}_{2} \to H_{2} {CO}_{3}$

More chemical equation examples:

Simple reaction: $2 H_{2} + O_{2} \to 2 H_{2} O$

With states of matter: $$ \mathrm{NaCl_{(s)} + H_2O_{(l)} \rightarrow Na^+{(aq)} + Cl^-{(aq)}} $$

Complex reaction with charges: ${MnO}_{4}^{-} + 8 H^{+} + 5 e^{-} \to {Mn}^{2 +} + 4 H_{2} O$

Equilibrium reaction: $N_{2} + 3 H_{2} ⇌ 2 {NH}_{3}$

Chemical equation syntax tips:

Use \mathrm{} to wrap chemical formulas for proper formatting
\rightarrow for reactions, \rightleftharpoons for equilibrium
^+ and ^- for charges: Na^+, Cl^-
_{(s)}, _{(l)}, _{(g)}, _{(aq)} for states of matter
Subscripts use _: H_2O, 2NH_3
Superscripts use ^: Mn^{2+}

Troubleshooting:

If math doesn’t render, check that math = true is in your frontmatter
Ensure you’re using the correct delimiters ($ for inline, $$ for display)
For complex expressions, test in smaller parts first
Check browser console for MathJax errors

Footnotes

Standard markdown footnotes¹ work like this.

HTML in Markdown

Custom HTML can be included directly in markdown files if your renderer supports it.

Conclusion

This boilerplate demonstrates the range of markdown features and proper sidenote usage ⁶. For practical applications and performance considerations ⁷, see our guides on Digital Gardening. As noted in seminal work ⁶, proper documentation is essential.

Diagrams

This theme supports both Mermaid diagrams and GoAT ASCII diagrams for visualizing complex information.

Mermaid Diagrams

Mermaid diagrams are created using fenced code blocks with the mermaid language identifier. They render dynamically and are perfect for interactive documentation.

Basic Flowchart

Markdown source:

Sequence Diagram

Gantt Chart

Class Diagram

Entity Relationship Diagram

Git Graph

GoAT ASCII Diagrams

GoAT diagrams use ASCII art for simple, text-based visualizations that work well in plain text environments.

System Architecture

Data Flow

Diagram Best Practices

Mermaid Advantages:

Interactive and clickable elements
Professional appearance
Wide variety of diagram types
Automatic layout and styling
Good for complex relationships

GoAT Advantages:

Works in plain text environments
Fast rendering (server-side)
Copy-pasteable as ASCII art
Minimal dependencies
Good for simple diagrams

Usage Guidelines:

Use Mermaid for complex, interactive diagrams
Use GoAT for simple diagrams that need to work everywhere
Both types export well to PDF
Keep diagrams focused on one concept
Add sidenotes to explain complex diagram elements

Diagrams are powerful tools for explaining complex concepts. Choose the right type based on your audience and medium - Mermaid for web-first content, GoAT for documentation that might be viewed as plain text.

Gallery Slider Examples

The theme includes a powerful gallery slider component for showcasing multiple images with navigation controls, thumbnails, and captions.

Basic Gallery

Beautiful landscape with mountains

Forest path in autumn colors

Portrait orientation example

The gallery slider supports both landscape and portrait images, automatically adjusting the layout. Navigation works via arrows, dots, thumbnails, and keyboard controls.

Autoplay Gallery

Autoplay every 3 seconds

Hover to pause autoplay

Click navigation to restart timer

Autoplay can be enabled with a custom interval. Thumbnails can be hidden for a cleaner look.

Gallery with Custom Options

Gallery with all features enabled

Navigate with arrows, dots, or thumbnails

Support for both landscape and portrait

Gallery Features:

Navigation: Arrow keys, click arrows, dot indicators, thumbnail clicks
Autoplay: Optional with customizable intervals
Responsive: Adapts to different screen sizes
Keyboard Support: Left/right arrow keys, Escape to close
Touch Support: Swipe gestures on mobile devices
Accessibility: Proper ARIA labels and keyboard navigation

The gallery component is fully accessible and works with keyboard navigation. Each image can have individual captions for better context.

}}

^l src2="/images/docs/gallery-slider-doc/plums-8932336_1280.jpg" alt2=“Auto slide 2” caption2=“Hover to pause autoplay” src3="/images/docs/gallery-slider-doc/spenser-sembrat-esoj35vCKS8-unsplash.jpg" alt3=“Auto slide 3” caption3=“Click navigation to restart timer”

}}

Autoplay can be enabled with a custom interval. Thumbnails can be hidden for a cleaner look.

This is a footnote content. ↩︎