To make a table of contents, you can write the following at top of your article:

{{<   toc   >}}

The table of contents will appear like this:

Here is an example of headings. You can use this heading by the following markdown rules. For example: use # for heading 1 and use ###### for heading 6.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

A horizontal line can be drawn with the help of three dashes i.e. --- or <hr> tag.

content above horizontal line

---
content below horizontal line

Renders like this:

content above horizontal line

content below horizontal line

Latex

Firstly, to enable latex support in your document. You must use math: true in your front matter. An example article with math support would look like:

---
author: "your_name"
date: 2026-01-02T16:03:40.480Z
# other properties
math: true
---

// rest of the article

Now you can use latex in your document. You can use either $ /* your code */ $ or \\( /* your code */ \\)for inline latex. And $$ /* your code */ $$ or \\[ /* your code */ \\] for block latex.

Below are some examples:

1. A linear program

$$
\begin{align*}
    \text{max} \quad 2x_1 + 5x_2 & \\\\
    \text{s.t.} \quad 4x_1 + 9x_2 &\ge 11 \\\\
                            5x_1 + x_2 &\ge -4 \\\\
                            x_1, x_2 &\ge 0
\end{align*}
$$

renders as:

$$ \begin{align*} \text{max} \quad 2x_1 + 5x_2 & \\ \text{s.t.} \quad 4x_1 + 9x_2 &\ge 11 \\ 5x_1 + x_2 &\ge -4 \\ x_1, x_2 &\ge 0 \end{align*} $$

2. Weight optimization in a neural network using gradient descend:

$$
    w_{t+1} = w_t - \gamma \cdot \nabla_w f(w)
$$

renders as:

$$ w_{t+1} = w_t - \gamma \cdot \nabla_w f(w) $$

3. Bayes theorm:

$$
    P( A \mid B ) = \frac{ P( B \mid A ) \times P(A) }{ P(B) }
$$

renders as:

$$ P( A \mid B ) = \frac{ P( B \mid A ) \times P(A) }{ P(B) } $$

Emphasis

The emphasis, aka italics, with _asterisks_ or _underscores_.

Strong emphasis, aka bold, with **asterisks** or **underscores**.

The combined emphasis with **asterisks and _underscores_**.

Strike through uses two tildes. ~~Scratch this.~~

renders as:

The emphasis, aka italics, with asterisks or underscores.

Strong emphasis, aka bold, with asterisks or underscores.

The combined emphasis with asterisks and underscores.

Strike through uses two tildes. Scratch this.

Button

{{< button label="Button" link="/your/link" style="solid" >}}

renders as:

Link

[I'm an inline-style link](https://www.google.com)

[I'm an inline-style link with title](https://www.google.com "Google's Homepage")

[I'm a relative reference to a repository file](../blob/master/LICENSE)

URLs and URLs in angle brackets will automatically get turned into links.
<http://www.example.com> or <http://www.example.com> and sometimes
example.com (but not on Github, for example).

renders as:

I’m an inline-style link

I’m an inline-style link with title

I’m a relative reference to a repository file

URLs and URLs in angle brackets will automatically get turned into links. http://www.example.com or http://www.example.com and sometimes example.com (but not on Github, for example).

Some text to show that the reference links can follow later.

Paragraph

Just write paragraphs as you normally would or use the <p> tag </p>.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam nihil enim maxime corporis cumque totam aliquid nam sint inventore optio modi neque laborum officiis necessitatibus, facilis placeat pariatur! Voluptatem, sed harum pariatur adipisci voluptates voluptatum.

Ordered List

1. List item
2. List item
3. List item

renders as:

1. List item
2. List item
3. List item

Unordered List

- List item
- List item

renders as:

• List item
• List item

Notice

To see how these notes are generated, see the corresponding markdown file in github.

Tab

See corresponding markdown on Github, to learn how to generate tabbed content.

Accordions

Code and Syntax Highlighting

This is an Inline code sample.

var s = "JavaScript syntax highlighting";
alert(s);

s = "Python syntax highlighting"
print s

1#include <stdio.h>
2
3int main(void)
4{
5    printf("hello, world\n");
6    return 0;
7}

Diagram

Diagrams can be generated using mermaid. For example:

flowchart TD
    A[Start] --> B{Is it?}
    B -- Yes --> C[OK]
    C --> D[Rethink]
    D --> B
    B -- No ----> E[End]

Blockquote

You can write a block quote using the > sign followed by a space and your note.

Tables

| Tables        |      Are      |  Cool |
| ------------- | :-----------: | ----: |
| col 3 is      | right-aligned | $1600 |
| col 2 is      |   centered    |   $12 |
| zebra stripes |   are neat    |    $1 |

renders as:

Image

There are 3 methods of adding images:

1. use native markdown syntax

![caption](https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Portland_suburban_S-curve_regression_analysis.png/640px-Portland_suburban_S-curve_regression_analysis.png)

renders like this:

1. Using html <img> tag. This gives you more freedom. You can define height, width and other CSS properties. You can also use tailwind classes.

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Dually_Chordial_Graph.png/640px-Dually_Chordial_Graph.png" width=600px>caption</img>

renders like this:

caption

3. Use hugoplate specific syntax:

{{< image src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Backprogation_neural_networks.png/640px-Backprogation_neural_networks.png" caption="" alt="alter-text" height="" width="" position="center" command="fill" option="q100" class="img-fluid" title="image title" webp="false" >}}

Gallery

Multiple images can be displayed as a gallary. See Github, for more details.

Slider

You can also add a slider with multiple images, see Github for more details.

Youtube video

Embed youtube videos.

Custom video

Display a custom video.

Conclusion

Thank you for reading. The source code of this blog is available at Github here. Please read the source code for a more through understanding.

Happy writing 🤗