Header image for the post titled 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


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

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

Syntax Highlighting

Specify language after triple ticks:

  • 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 \\

For inline math (\( \mathbb{R} \)) use \\( \mathbb{R} \\) delimiter.


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

And then define the link:

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


You can create footnotes like this[^footnote].

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

will produce: You can create footnotes like this1. This is another footnote2.

  1. Here is the text of the footnote↩︎

  2. And then there was another one. ↩︎