Extended Markdown Syntax

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

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

{{< 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 \]
{{< /raw >}}

Inline Formula

The default inline delimiters are:

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

For example:

1

$c = \pm\sqrt{a^2 + b^2}$ and \\(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}$ and \(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 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

The premise is that you 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

A horizontal rule with a CSS class:

1
2

---
{.awesome-hr}

The rendered output looks like this:

A blockquote with a CSS class:

1
2
3

> foo\
> bar
{.text-danger}

The rendered output looks like this:

foo
bar

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

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 attributes to a code block, for example:

1
2

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

The rendered output looks like this:

1

console.log('hello FixIt!');

Code Fences Extended

Diagrams Support

This part is shown in the diagrams support page.