Skip to main content
Test pages

Test pages #

CommonMark Spec

Normal tests #

Begin test file

Formatting #

Bold, bold, 加粗

Italic, italic, 斜体

Underline, underline

Strike, strike, strike, ~strike~, –strike–

Highlight, =highlight=, ==highlight==

Footnote1, footnote2


Lists #

  • ul
  • Unordered list
  1. ol
  2. Ordered list
dl
dt
Description list
  • Task list
  • Task list

Code #

Inline code, `escape`, and keystroke

Inline code, `escape`, and keystroke

package main

import "log"

func add(x int, y int) int {
  log.Println("We are going to take the sum of two numbers, and leave a very very very long comment.")
  return x + y
}

func main() {
  y := add(1, 2)
  log.Println(y)
}

Here’s an example with line numbers. The CSS is no longer buggy thanks to the great Joe Mooring.

199
200
201
202
203
204
205
206
207
208
209
210
211
package main

import "log"

func add(x int, y int) int {
  log.Println("We are going to take the sum of two numbers, and leave a long comment.")
  return x + y
}

func main() {
  y := add(1, 2)
  log.Println(y)
}

Font #

我能体に傷つけないで吞下 259 ml glass。

Four score and seven years ago our fathers brought forth upon this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

0 Oo Ii Ll 1 | 2 Z 5 s 8 Bb 6 # * ^ ~ () {} [] . , : ; “ ‘ ’ `

0 Oo Ii Ll 1 | 2 Z 5 s 8 Bb 6 # * ^ ~ () {} [] . , : ; “ ‘ ’ `

Inline HTML #

#282A36

#F8F8F2

LaTeX & Table #

$\LaTeX{}$

$$R_1 \begin{cases} >\mu_{2} \\ \leq \mu_{2} \end{cases}$$

Message to agent 1$M_1$
Agent 1’s action$a_1$
New finding$R_1 \begin{cases} >\mu_{2} \\ \leq \mu_{2} \end{cases}$

Hints with block attribute #

CommonMark/Goldmark flavour: (Doc: #Attributes in yuin/goldmark/README)

Info hint

Warning hint

Danger (!) hint

Usage:

> Info hint
{.book-hint .info}

> Warning hint
{.book-hint .warning}

> Danger **(!)** hint
{.book-hint .danger}

GitHub flavour: (Doc: [Markdown] An option to highlight a “Note” and “Warning” using blockquote (Beta) · community · Discussion #16925)

[!NOTE]
Highlights information that users should take into account, even when skimming.

[!IMPORTANT]
Crucial information necessary for users to succeed.

[!WARNING]
Critical content demanding immediate user attention due to potential risks.

Usage:

> [!NOTE]  
> Highlights information that users should take into account, even when skimming.

> [!IMPORTANT]  
> Crucial information necessary for users to succeed.

> [!WARNING]  
> Critical content demanding immediate user attention due to potential risks.

Custom Shortcodes (by theme) #

Columns #

Hello…
…hello…
…world.

Usage:

{{< columns >}}
Hello...

<--->

...hello...

<--->

...world.
{{< /columns >}}

Summary/Detail #

Summary
Who am I? Where am I?

Usage:

{{< details "Summary" open >}}
Who am I? Where am I?
{{< /details >}}

Hints (deprecated) #

Note: this has become redundant since Hugo v0.108.0 (release notes). Use block attributes instead.

See Markdown attributes - tips & tricks - HUGO for more info.

Previous usage:

{{< hint info >}}
Info hint
{{< /hint >}}
{{< hint warning >}}
Warning hint
{{< /hint >}}
{{< hint danger >}}
Danger **(!)** hint
{{< /hint >}}

Tabs #

Ok
Ok
Not ok

Usage:

{{< tabs "test-tabs" >}}
{{< tab "macOS" >}} Ok {{< /tab >}}
{{< tab "Linux" >}} Ok {{< /tab >}}
{{< tab "Windows" >}} Not ok {{< /tab >}}
{{< /tabs >}}

TODO: Use gohugoio/hugo/docs/layouts/shortcodes/code-toggle.html with gohugoio/hugoDocs/layouts/shortcodes/code-toggle.html which has synced tab groups.

Custom Shortcodes (by me) #

diffcode #

Adapted from: CloudCannon/alto-hugo-template/layouts/shortcodes/diffcode.html and CloudCannon/alto-hugo-template/layouts/partials/diffcode.html.

[submodule "something"]
    path = something
    url = https://github.com/something/something.git
    ignore = untracked
    branch = new-branch

Usage:

{{< diffcode >}}
```sh
[submodule "something"]
    path = something
    url = https://github.com/something/something.git
+    ignore = untracked
-    branch = new-branch
```
{{< /diffcode >}}

highlight-file #

import numpy as np
import pandas as pd

print("hello world")

Usage:

{{< highlight-file file="test.py" lang="python" >}}

Folder structure: (via Hugo Page bundle)

Non-page resources work for both branch bundles and leaf bundles. Therefore, so long as the highlighted file is not of content formats, it can be a resource for any page.

content/test-page
├── _index.md     <-- branch bundle index file
└── test.py       <-- resource for section page: test-page

content/computer/software-usage/obsidian
├── index.md      <-- leaf bundle index file
└── theme-ib.css  <-- resource for regular page: obsidian

kbd #

I+hate+typing  

Usage:

{{< kbd I hate typing >}}

<!-- if key contains symbols, use literal -->
{{< kbd `I` `hate` `typing` >}}

GitHub Gist #

Native mode: (No JS, with optional lineNos and hlLines params that work exactly like in the highlight shortcode.)

GitHub Gist: hello-world.md markdown
---
Animal: Cat 
Thing: Mat  
---

# hello world

<!-- Typora TOC -->

[TOC]

<!-- iA Writer & 1Writer TOC -->

{{TOC}}

## Formatting

#tag

**Bold**, __bold__, **加粗**

*Italic*, _italic_, *斜体*

<u>Underline</u>, <underline>underline</underline>

<del>Strike</del>, <s>strike</s>, ~~strike~~, ~strike~, --strike--

<mark>Highlight</mark>, =highlight=, ==highlight==

Internal link: [[202005191919]]

<!-- Comments-->

Footnote[^1], footnote[^2]

——

## Lists

- `ul`
- Unordered list

1. `ol`
1. Ordered list

`dl`
:   `dt`
:   Description list

- [x] Task list
- [ ] Task list

## Code

Inline `code`, `` `escape` ``, and <kbd>keystroke</kbd>

```html
<h1>hello world</h1>
```

```js
console.log(hello world)
```

## Font

我能体に傷つけないで吞下 259 ml glass。

> Four score and seven years ago our fathers brought forth upon this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

0 Oo Ii Ll 1 | 2 Z 5 s 8 Bb 6 #*^~(){}[] . , : ; “ ‘ ’ `

```
0 Oo Ii Ll 1 | 2 Z 5 s 8 Bb 6 #*^~(){}[] . , : ; “ ‘ ’ `
```

## Inline HTML

ref: https://burk.io/2020/let-there-be-dark

<div title="#282a36" style="height: 50px; width: 100px; background-color: #282a36; display: inline-block; border-style: solid; border-color: black; color:white; padding:10px;">#282a36</div>

<div title="#f8f8f2" style="height: 50px; width: 100px; background-color: #f8f8f2; margin-right: 5px; display: inline-block; border-style: solid; border-color: black; color:black; padding:10px;">#f8f8f2</div>

## LaTeX & Table

$\LaTeX{}$

$$R_1 \begin{cases} >\mu_{2} \\ \leq \mu_{2} \end{cases}$$

| Message to agent 1 | $M_1$          |
| ------------------ | -------------- |
| Agent 1's action   | $a_1$          |
| New finding        | $R_1\begin{cases}>\mu_{2}\\\leq\mu_{2}\end{cases}$ |


## Figure

```sequence
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob—>Alice: I am good thanks!
```

```mermaid
pie
    title Pie Chart
    “Dogs” : 386
    “Cats” : 85
    “Rats” : 150 
```

```flow
st=>start: Agent
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op
```

[^1]: The linked footnote appears at the end of the document.

[^2]: New lines
GitHub Gist: hello-world.md markdown
  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
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
---
Animal: Cat 
Thing: Mat  
---

# hello world

<!-- Typora TOC -->

[TOC]

<!-- iA Writer & 1Writer TOC -->

{{TOC}}

## Formatting

#tag

**Bold**, __bold__, **加粗**

*Italic*, _italic_, *斜体*

<u>Underline</u>, <underline>underline</underline>

<del>Strike</del>, <s>strike</s>, ~~strike~~, ~strike~, --strike--

<mark>Highlight</mark>, =highlight=, ==highlight==

Internal link: [[202005191919]]

<!-- Comments-->

Footnote[^1], footnote[^2]

——

## Lists

- `ul`
- Unordered list

1. `ol`
1. Ordered list

`dl`
:   `dt`
:   Description list

- [x] Task list
- [ ] Task list

## Code

Inline `code`, `` `escape` ``, and <kbd>keystroke</kbd>

```html
<h1>hello world</h1>
```

```js
console.log(hello world)
```

## Font

我能体に傷つけないで吞下 259 ml glass。

> Four score and seven years ago our fathers brought forth upon this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

0 Oo Ii Ll 1 | 2 Z 5 s 8 Bb 6 #*^~(){}[] . , : ; “ ‘ ’ `

```
0 Oo Ii Ll 1 | 2 Z 5 s 8 Bb 6 #*^~(){}[] . , : ; “ ‘ ’ `
```

## Inline HTML

ref: https://burk.io/2020/let-there-be-dark

<div title="#282a36" style="height: 50px; width: 100px; background-color: #282a36; display: inline-block; border-style: solid; border-color: black; color:white; padding:10px;">#282a36</div>

<div title="#f8f8f2" style="height: 50px; width: 100px; background-color: #f8f8f2; margin-right: 5px; display: inline-block; border-style: solid; border-color: black; color:black; padding:10px;">#f8f8f2</div>

## LaTeX & Table

$\LaTeX{}$

$$R_1 \begin{cases} >\mu_{2} \\ \leq \mu_{2} \end{cases}$$

| Message to agent 1 | $M_1$          |
| ------------------ | -------------- |
| Agent 1's action   | $a_1$          |
| New finding        | $R_1\begin{cases}>\mu_{2}\\\leq\mu_{2}\end{cases}$ |


## Figure

```sequence
Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob—>Alice: I am good thanks!
```

```mermaid
pie
    title Pie Chart
    “Dogs” : 386
    “Cats” : 85
    “Rats” : 150 
```

```flow
st=>start: Agent
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

st->op->cond
cond(yes)->e
cond(no)->op
```

[^1]: The linked footnote appears at the end of the document.

[^2]: New lines

Usage:

{{< gist
user="loikein"
gist="27ef6913386b206d1b3c18b8e93c5768"
file="hello-world.md"
lang="markdown"
lineNos="table"
hlLines="2-4 7" >}}

Embed mode usage: (No fallback for lack of JS, only use when you have to.)

{{< gist
user="loikein"
gist="27ef6913386b206d1b3c18b8e93c5768"
file="hello-world.md"
syntax="markdown"
embed="true" >}}

ruby #

你好世界hello world

Usage:

{{< ruby "你好世界" "hello world" >}}

spoiler #

Usage:

{{< spoiler >}}this is an inline spoiler{{< /spoiler >}}
Spoiler
this is a block spoiler

Usage:

{{< spoiler block="true" >}}this is a block spoiler{{< /spoiler >}}

  1. The linked footnote appears at the end of the document. ↩︎

  2. New lines ↩︎