Extended Markdown Syntax

FixIt theme has some extended syntax elements for you to write articles.

Inserted Text

Hugo supports an inserted text Markdown extension:

1

The author of FixIt theme is ++Lruihao++.

The rendered output looks like this:

The author of FixIt theme is Lruihao.

Marked Text

Hugo supports a marked text Markdown extension:

1

==FixIt== is an awesome Hugo theme!

The rendered output looks like this:

FixIt is an awesome Hugo theme!

Subscript

Hugo supports a subscript Markdown extension:

1

The chemical formula of water is H~2~O.

The rendered output looks like this:

The chemical formula of water is H₂O.

Superscript

Hugo supports a superscript Markdown extension:

1

2^10^ equals 1024.

The rendered output looks like this:

2¹⁰ equals 1024.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

[markup]
  [markup.goldmark]
    [markup.goldmark.extensions]
      strikethrough = false
      # https://gohugo.io/getting-started/configuration-markup/#extras
      [markup.goldmark.extensions.extras]
        [markup.goldmark.extensions.extras.delete]
          enable = true
        [markup.goldmark.extensions.extras.insert]
          enable = true
        [markup.goldmark.extensions.extras.mark]
          enable = true
        [markup.goldmark.extensions.extras.subscript]
          enable = true
        [markup.goldmark.extensions.extras.superscript]
          enable = true

Emoji Support

This part is shown in the emoji support page.

Mathematical Formula

FixIt theme supports mathematical formulas based on $\KaTeX$.

Set the property enable = true under [params.math] in your theme configuration and the property math: true of the article front matter to enable the automatic rendering of mathematical formulas.

1
2
3
4
5
6
7

{{< raw >}}Inline Formula: \(\mathbf{E}=\sum_{i} \mathbf{E}_{i}=\mathbf{E}_{1}+\mathbf{E}_{2}+\mathbf{E}_{3}+\cdots\){{< /raw >}}

{{< raw >}}
Block Formula:
\[ a=b+c \\ d+e=f \]
\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \]
{{< /raw >}}

Inline Formula

The default inline delimiters are:

• $ ... $
• \( ... \) (escaped: \\( ... \\))

For example:

1

$c = \pm\sqrt{a\^2 + b\^2}$ 和 \\(f(x)=\int_{-\infty}\^{\infty} \hat{f}(\xi) e\^{2 \pi i \xi x} d \xi\\)

The rendered output looks like this:

$c = \pm\sqrt{a^2 + b^2}$ 和 \(f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi\)

Block Formula

The default block delimiters are:

• $$ ... $$
• \[ ... \] (escaped: \\[ ... \\])
• \begin{equation} ... \end{equation} (unnumbered: \begin{equation*} ... \end{equation*})
• \begin{align} ... \end{align} (unnumbered: \begin{align*} ... \end{align*})
• \begin{alignat} ... \end{alignat} (unnumbered: \begin{alignat*} ... \end{alignat*})
• \begin{gather} ... \end{gather} (unnumbered: \begin{gather*} ... \end{gather*})
• \begin{CD} ... \end{CD}

For example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

$$ c = \pm\sqrt{a\^2 + b\^2} $$

\\[ f(x)=\int_{-\infty}\^{\infty} \hat{f}(\xi) e\^{2 \pi i \xi x} d \xi \\]

\begin{equation*}
  \rho \frac{\mathrm{D} \mathbf{v}}{\mathrm{D} t}=\nabla \cdot \mathbb{P}+\rho \mathbf{f}
\end{equation*}

\begin{equation}
  \mathbf{E}=\sum_{i} \mathbf{E}\_{i}=\mathbf{E}\_{1}+\mathbf{E}\_{2}+\mathbf{E}_{3}+\cdots
\end{equation}

\begin{align}
  a&=b+c \\\\
  d+e&=f
\end{align}

\begin{alignat}{2}
   10&x+&3&y = 2 \\\\
   3&x+&13&y = 4
\end{alignat}

\begin{gather}
   a=b \\\\
   e=b+c
\end{gather}

\begin{CD}
   A @>a\>> B \\\\
@VbVV @AAcA \\\\
   C @= D
\end{CD}

The rendered output looks like this:

$$ c = \pm\sqrt{a^2 + b^2} $$

\[ f(x)=\int_{-\infty}^{\infty} \hat{f}(\xi) e^{2 \pi i \xi x} d \xi \]

\begin{equation*} \rho \frac{\mathrm{D} \mathbf{v}}{\mathrm{D} t}=\nabla \cdot \mathbb{P}+\rho \mathbf{f} \end{equation*}

\begin{equation} \mathbf{E}=\sum_{i} \mathbf{E}_{i}=\mathbf{E}_{1}+\mathbf{E}_{2}+\mathbf{E}_{3}+\cdots \end{equation}

\begin{align} a&=b+c \\ d+e&=f \end{align}

\begin{alignat}{2} 10&x+&3&y = 2 \\ 3&x+&13&y = 4 \end{alignat}

\begin{gather} a=b \\ e=b+c \end{gather}

\begin{CD} A @>a>> B \\ @VbVV @AAcA \\ C @= D \end{CD}

Copy-Tex

Copy-tex is an extension for $\KaTeX$.

By the extension, when selecting and copying $\KaTeX$ rendered elements, copies their $\LaTeX$ source to the clipboard.

Set the property copyTex = true under [params.math] in your theme configuration to enable Copy-tex.

Select and copy the formula rendered in the previous section, and you can find that the copied content is the LaTeX source code.

Mhchem

mhchem is an extension for $\KaTeX$.

By the extension, you can write beautiful chemical equations easily in the article.

Set the property mhchem = true under [params.math] in your theme configuration to enable mhchem.

1
2
3

$$ \ce{CO2 + C -> 2 CO} $$

$$ \ce{Hg\^2+ ->[I-] HgI2 ->[I-] [Hg\^{II}I4]\^2-} $$

The rendered output looks like this:

$$ \ce{CO2 + C -> 2 CO} $$

$$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$

Ruby Annotation

An extended Markdown syntax for ruby annotation is supported in FixIt theme:

1

[Hugo]^(An open-source static site generator)

The rendered output looks like this:

HugoAn open-source static site generator

Fraction

An extended Markdown syntax for fraction is supported in FixIt theme:

1
2
3

[Light]/[Dark]

[99]/[100]

The rendered output looks like this:

^Light/_Dark

⁹⁰/₁₀₀

Font Awesome

FixIt theme uses Font Awesome V6 as the icon library. You can easily use these icons in your articles.

Get the class of icons you wanted from the Font Awesome website.

1
2
3

Gone camping! :(fa-solid fa-campground fa-fw): Be back soon.

That is so funny! :(fa-regular fa-grin-tears):

The rendered output looks like this:

Gone camping!  Be back soon.

That is so funny!

Escape Character

In some special cases (when writing this theme documentation ), your content will conflict with basic or extended Markdown syntax, and it is inevitable.

The escape character syntax can help you build the content you wanted:

1

{?X} -> X

For example, two : will enable emoji syntax, which is not the behavior you want. The escape character syntax is like this:

1

{?:}joy:

The rendered output looks like this:

:joy: instead of 😂

Another example is:

1

[link{?]}(#escape-character)

The rendered output looks like this:

[link](#escape-character) instead of link.

Custom Attribute

Default off, need to set goldmark.parser.attribute.block to true.

Hugo supports adding attributes (e.g. CSS classes) to Markdown blocks, e.g. tables, lists, paragraphs etc.

Syntax

1
2

some Markdown content
{#id .class1 .class2 key1="value1" key2="value2"}

In most cases, place the attribute list beneath the markup element. For headings and fenced code blocks, place the attribute list on the right.

Examples

Horizontal Rule

A horizontal rule with a CSS class:

1
2

---
{.awesome-hr}

The rendered output looks like this:

Blockquote

A blockquote with a CSS class:

1
2
3

> foo\
> bar
{.text-danger}

The rendered output looks like this:

foo
bar

table & list

There are some current limitations: For tables you can currently only apply it to the full table, and for lists the ul/ol-nodes only, e.g.:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

* Fruit
  * Apple
  * Orange
  * Banana
  {.text-success}
* Dairy
  * Milk
  * Cheese
  {.text-warning}
{.text-primary}

The rendered output looks like this:

• Fruit
  • Apple
  • Orange
  • Banana
• Dairy
  • Milk
  • Cheese

Code Fences

Note that attributes in code fences must come after the opening tag, with any other highlighting processing instruction, e.g.:

1
2
3

```go {.myclass linenos=table,hl_lines=[8,"15-17"],linenostart=199}
// ... code
```

Add title attribute to a code block, for example:

1
2
3

```js {title="test.js"}
console.log('hello FixIt!');
```

The rendered output looks like this:

1

console.log('hello FixIt!');

Add no-header class to a code block to hide the header, for example:

1
2
3
4
5
6
7
8

```js {.no-header}
function forEach(elements, handler) {
  elements = elements || [];
  for (let i = 0; i < elements.length; i++) {
    handler(elements[i]);
  }
}
```

The rendered output looks like this:

1
2
3
4
5
6

function forEach(elements, handler) {
  elements = elements || [];
  for (let i = 0; i < elements.length; i++) {
    handler(elements[i]);
  }
}

Add data-open attribute to a code block to force expand or collapse the code block, for example:

1
2
3

```js {data-open=false}
console.log('hello FixIt!');
```

The rendered output looks like this:

1

console.log('hello FixIt!');

Code Fences Extended

GoAT

This part is shown in the diagrams support page.

Mermaid

This part is shown in the diagrams support page.

Timeline

This part is shown in the Timeline support page.