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 ¹^1., consistent formatting improves readability. Recent studies ²^2. 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 ³^3.. This evolution continues to shape how we build websites ³ and manage content ⁴^4..

Sidenotes work great with lists to provide additional context for specific items without breaking the list flow ⁵^5.. 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^a.Sidenotes can contain formatting too! Use them for supplementary information that doesn’t interrupt the main text flow.. 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^b.This is a standard sidenote. Use it for brief asides or clarifications.

For academic applications of these formatting techniques, see our Academic Writing guide. ⁶^6.

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

^c^c.Sidenotes work great with lists to provide additional context for specific items without breaking the list flow.

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

^d^d.Images can be further explained here without cluttering the main content.

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 ⁷^7..

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

^e^e.Code explanations can be placed in sidenotes, keeping the code block clean while providing context.

Blockquotes and Special Quotes

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

^f^f.Provide information about the quote source or additional context here.

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^g.This is a standard sidenote. Use it for brief asides or clarifications.

Complex paragraph with multiple concepts that benefit from sidenotes.^h^h.First sidenote explaining an initial concept in detail without interrupting the paragraph flow. The text continues here with more information that might need explanation.ⁱ^i.Second sidenote providing additional context or examples for another concept mentioned in the same paragraph.

Sidenotes with References

Academic-style writing often uses sidenotes for citations.¹^j^j.¹ Author, N. (2023). Title of the work. Publisher. Page 42.

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 = mc^2$, $\alpha + \beta = \gamma$, $\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 = mc^2$.

Block Math

For standalone equations, use double dollar signs:

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

Equation Arrays and Alignment

For multiple aligned equations:

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

Matrices

$$ \begin{pmatrix} a & b \ c & d \end{pmatrix} \begin{bmatrix} x \ y \end{bmatrix} = \begin{bmatrix} ax + by \ cx + dy \end{bmatrix} $$

Complex Notation

$$ \iiint_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

$$ \tag{1} E = mc^2 $$

Chemical Equations

Chemical equations use standard LaTeX chemistry notation with MathJax:

$$ \mathrm{H_2O + CO_2 \rightarrow H_2CO_3} $$

More chemical equation examples:

Simple reaction: $$ \mathrm{2H_2 + O_2 \rightarrow 2H_2O} $$

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

Complex reaction with charges: $$ \mathrm{MnO_4^- + 8H^+ + 5e^- \rightarrow Mn^{2+} + 4H_2O} $$

Equilibrium reaction: $$ \mathrm{N_2 + 3H_2 \rightleftharpoons 2NH_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

graph TD
    A[Start Process] --> B{Check Input}
    B -->|Valid| C[Process Data]
    B -->|Invalid| D[Show Error]
    C --> E[Save Results]
    D --> F[Request New Input]
    E --> G[End]
    F --> B

Markdown source:

graph TD
    A[Start Process] --> B{Check Input}
    B -->|Valid| C[Process Data]
    B -->|Invalid| D[Show Error]

graph LR
  If --> Then
  Then --> Else

^k^k.Flowcharts are excellent for showing decision processes and workflows. Use rectangles for processes, diamonds for decisions, and circles for start/end points.

Sequence Diagram

sequenceDiagram
    participant User
    participant Frontend
    participant API
    participant Database
    
    User->>Frontend: Submit Form
    Frontend->>API: POST /api/data
    API->>Database: INSERT query
    Database-->>API: Success
    API-->>Frontend: 200 OK
    Frontend-->>User: Show Success Message

Gantt Chart

gantt
    title Project Development Schedule
    dateFormat YYYY-MM-DD
    section Analysis
    Requirements Gathering    :done, req, 2024-01-01, 2024-01-15
    System Design           :done, design, 2024-01-16, 2024-02-01
    section Development  
    Backend Development     :active, backend, 2024-02-01, 2024-03-15
    Frontend Development    :frontend, 2024-02-15, 2024-04-01
    section Testing
    Unit Testing           :testing, after backend, 10d
    Integration Testing    :integration, after frontend, 5d

Class Diagram

classDiagram
    class User {
        -String email
        -String password
        +login()
        +logout()
        +updateProfile()
    }
    class Post {
        -String title
        -String content
        -Date createdAt
        +publish()
        +archive()
    }
    class Comment {
        -String text
        -Date timestamp
        +edit()
        +delete()
    }
    
    User ||--o{ Post : creates
    Post ||--o{ Comment : has
    User ||--o{ Comment : writes

Entity Relationship Diagram

erDiagram
    USER {
        int id PK
        string email UK
        string name
        datetime created_at
    }
    POST {
        int id PK
        int user_id FK
        string title
        text content
        datetime published_at
    }
    COMMENT {
        int id PK
        int post_id FK
        int user_id FK
        text content
        datetime created_at
    }
    
    USER ||--o{ POST : writes
    POST ||--o{ COMMENT : has
    USER ||--o{ COMMENT : makes

Git Graph

%%| label: fig-mermaid-git
%%| fig-cap: Git a load of this!
%%| fig-alt: An example Git graph, drawn using Mermaid.

gitGraph
  commit
  commit
  branch develop
  checkout develop
  commit
  commit
  checkout main
  merge develop
  commit
  commit

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^l.Autoplay can be enabled with a custom interval. Thumbnails can be hidden for a cleaner look. 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. ↩︎