Test pages #
Normal tests #
Begin test file…
Formatting #
Bold, bold, 加粗
Italic, italic, 斜体
Underline,
Strike, strike, strike, ~strike~, –strike–
Highlight, =highlight=, ==highlight==
Lists #
ul
- Unordered list
ol
- 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.
|
|
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 #
Usage:
{{< columns >}}
Hello...
<--->
...hello...
<--->
...world.
{{< /columns >}}
Summary/Detail #
Summary
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 #
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.)
---
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 #
你好世界Usage:
{{< ruby "你好世界" "hello world" >}}
spoiler #
Usage:
{{< spoiler >}}this is an inline spoiler{{< /spoiler >}}
Spoiler
Usage:
{{< spoiler block="true" >}}this is a block spoiler{{< /spoiler >}}