Example of markdown supported by HUGO CMS:
Text type ⚓
Bold text
**Bold text**
Italic Text
*Italic Text*
Inline code section
`Inline code section`
Headings ⚓
Various ⚓
Headings ⚓
Sizes ⚓
#### Various
###### Headings
### Sizes
Image ⚓
![File Description](path/to/file/gohugoio-card-1.png)
Link ⚓
[Homepage for the CMS](https://gohugo.io/ "Link description")
List ⚓
-
Unordered
-
list
- with
- sublists
* Unordered
* list
* with
* sublists
-
Ordered
-
sublist
- with
- sublists
1. Ordered
2. sublist
1. with
2. sublists
Code blocks ⚓
1package main
2
3import "fmt"
4
5func main() {
6fmt.Println("hello world")
7}
was produced by: 1
1{{< highlight your_language "linenos=inline" >}}
2
3package main
4
5import "fmt"
6
7func main() {
8fmt.Println("hello world")
9}
10{{< /highlight >}}
Footnotes ⚓
To use footnotes2
your text [^name of your footnote] ... your other text
.
.
.
(everywhere in your page)
[^name of your footnote]: description of your footnote
Quote blocks ⚓
Example of quoteblock
Nested Block
> Example of quoteblock
>
> > Nested Block
Quote with green accent
{{< quote green >}} Quote with green accent {{< /quote >}}
The custom quote shortcode supports 6 colors:
- red
- green
- yellow
- orange
- purple
- blue
You can iterate through them
Quote with green accent
Subquote with red accent
Keep in mind to not rely too much on color to avoid difficulties to colorblind people
You can use this for conversation or various graphs
To create warning signs or other alert there are custom shortcodes for that Bootstrap
Blue
Subquote with yellow accent
Subquote with orange accent
Alerts ⚓
There are various way to mark some important infromation for your readers, one way is to use alert messages. To describe the type of alert this theme uses a syntax similar to Bootstrap to differentiate between them:
- Danger
- Warning
- Info
- Success
Danger ⚓
{{< danger "Danger Title" >}}
This alert box indicates a dangerous or potentially negative action
{{< / danger >}}
Warning ⚓
{{< warning "Warning Title" >}}
This alert box indicates a warning that might need attention.
{{< / warning >}}
Info ⚓
{{< info "Info Title" >}}
This alert box indicates a neutral informative change or action.
{{< / info >}}
Success ⚓
{{< success "Success title" >}}
This alert box indicates a successful or positive action.
{{< / success >}}
Configuration ⚓
You can edit the default symbols displayed on every type of alert by editing your config file
[params]
[params.alert]
warning="⚠️"
error="❗"
success="✔"
info="ℹ️"
-
To avoid Hugo CMS from rendering your shortcodes use this guide ↩︎
-
The number things you see on every boring book or in Wikipedia ↩︎