Technical Hugo Theme

July 31, 2025

Hi! And welcome to the Technical Hugo Theme! I’ve made this theme so I can easily write about technical projects and create summaries of lectures. It has a lot of features to make it easy to write technical documentation and blogs.

I’m still working on it, so if you have any suggestions or issues, please let me know!

Features

Code highlighting: Syntax highlighting for many programming languages.
MathJax support: For rendering mathematical equations.
Mermaid diagrams: For creating flowcharts and diagrams.
Geogebra API: For embedding Geogebra applets.
Falstad circuit partioal: For embedding Falstad circuit simulations.

Installation

To use this theme, you can clone it into your Hugo site:

git clone https://github.com/yourusername/TechnicalHugoTheme.git themes/TechnicalHugoTheme

Then, add the theme to your config.toml:

theme = "TechnicalHugoTheme"

Partials

The theme includes several partials to help you create a consistent layout

Code Highlighting

Code highlighting is enabled by default. In your markdown files, you can use the following syntax to highlight code:

```python
def hello_world():
    print("Hello, world!")
```

this wil render as:

def hello_world():
    print("Hello, world!")

MathJax

To use MathJax for rendering mathematical equations, you can include the following in your markdown files:

$$
E = mc^2
$$

this will render as: $E = m c^{2}$

You can also write math within text using inline math:

A simple equation is \( y = ax + b \). It generates a line with slope \( a \)

This will render as:
A simple equation is ( y = ax + b ). It generates a line with slope ( a )

Mermaid Diagrams

You can create flowcharts and diagrams using Mermaid syntax. For example:

this can be created by using the {{< diagram >}} shortcode.

{{< diagram >}}
graph TD;
    A[Start] --> B{Is it working?};
    B -- Yes --> C[Great!];
    B -- No --> D[Fix it];
    D --> B;
{{< /diagram >}}

Geogebra API

You can embed Geogebra applets using the Geogebra API. For example:

{{< geogebra >}}
f(x) = sin(x)
g(x) = x^2
{{< /geogebra >}}

f(x) = sin(x) g(x) = x^2