Hugo: Formatting Cheatsheet

Here is a Markdown-formatted list about the things that I always forget about Markdown.

First, a self-reminder on how to create a new article: hugo new content post/page-name.md

A note about Hugo Shortcodes

Since this site is built in Hugo, I cannot properly show a code example of a Hugo shortcode, as it will be automatically rendered. Since there is no official way to escape shortcodes, the convention I take here is to insert a space between the first two curly brakets. This space needs to be removed to yield properly functioning snippet: { {< shortcode parameter="value" >}}

Images

![Alt text](/path/to/img.jpg)

![Alt text](/path/to/img.jpg "Optional title")

Or you can use the built-in Figure shortcode (full description).

{ {< figure src="" title="" caption="" link="" target="" alt="" class="">}} 

Syntax Highlighting

Specify language after triple ticks:

```language
```

• text:

plain text

• shell:

sudo rm -rf / && "hello" > /dev/sda

• js:

function helloWorld () {
  alert("Hello, World!")
}

• java {style=github}

// github style
public class HelloWorld {
  public static void main(String[] args) {
    System.out.println("Hello, World!");
  }
}

Math Blocks

Render LaTeX using MathJax.

$$
\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}
$$

$$ \mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \ \end{vmatrix} $$

For inline math, i.e. \( \mathbb{R} \), use \\( and \\) delimiters.

You can label an equation using a \tag{} (visible) and a \label{} (for reference):

$$
y = mx + b
\tag{1}
\label{eq_of_line}
$$

$$ y = mx + b \tag{1} \label{eq_of_line} $$

And then refer to the equation using \eqref{label}: \( \eqref{eq_of_line} \)

\\( \eqref{eq_of_line} \\)

Tables

| Name              | Markdown            | HTML tag             |
| ----------------- | ------------------- | -------------------- |
| *Emphasis*        | `*Emphasis*`        | `<em></em>`          |
| **Strong**        | `**Strong**`        | `<strong></strong>` |
| `code`            | ``code``            | `<code></code>`      |
| ~~Strikethrough~~ | `~~Strikethrough~~` | `<del></del`         |
| <u>Underline</u>  | `<u>underline</u>`  | `<u></u>`            |

Links

Inline Links

This is [an example](http://example.com/ "Title") inline link.

[This link](http://example.net/) has no title attribute.

Links to internal content use the ref (produces an absolute reference) or relref (produces an relative reference) shortcodes.

My other [awesome post]( { { < relref "/post/awesome.md" > }}).

Reference Links

Reference-style links use a second set of square brackets, inside which you place a label of your choosing to identify the link:

This is [an example][id] reference-style link.

Then, anywhere in the document, you define your link label like this, on a line by itself:

[id]: http://example.com/  "Optional Title Here"

This is an example reference-style link.

The implicit link name shortcut allows you to omit the name of the link, in which case the link text itself is used as the name. Just use an empty set of square brackets — e.g., to link the word “Google” to the google.com web site, you could simply write:

[Google][]
And then define the link:

[Google]: http://google.com/

Footnotes

You can create footnotes like this[^footnote].

[^footnote]: Here is the *text* of the **footnote**.

will produce: You can create footnotes like this¹. This is another footnote².