This is the first post on this page. As a hello world is a tradition among coders, I will leave this little Hello World here. The first real post with content can be found here and is about the creation of this website. The rest of this post here will just be a Hugo and Markdown reference for future me, to see how content will look and how I did things. Maybe it will also help someone else along the way!

Markdown Reference

Paragraph and Line Breaks

Just type a line to make a paragraph. Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.

Leave one empty line to make the next paragraph. Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.

End a line with two spaces __, to force a line break.
Like this.

Text styling

Modifying text is so neat and easy. You can make your text bold, italic and strikethrough.

Using two asterisks this text is bold.
Two underscores work as well.
Let’s make it italic with a single asterisk.
You guessed it, one underscore is also enough.
Can we combine both of that? Absolutely.
WStrikethrough works with ~~Two tildes~~!

This is an unchecked textbox.
This is a checked textbox.
This is a textbox with overflowing text to see how it reacts when the line wraps. Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.

Using two asterisks **this text is bold**.  
Two underscores __work as well__.  
Let's make it *italic with a single asterisk*.  
You guessed it, _one underscore is also enough_.  
Can we combine **_both of that_?** Absolutely.  
WStrikethrough works with ~~Two tildes~~!


- [ ] This is an unchecked textbox.
- [x] This is a checked textbox.
- [x] This is a textbox with overflowing text to see how it reacts when the line wraps. Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.

Headings

The following HTML <h1>—<h6> elements represent six levels of section headings. <h1> is the highest section level while <h6> is the lowest.

H1

H2

H3

H4

H5

H6

# H1
## H2
### H3
#### H4
##### H5
###### H6

Comments

Comments are a way to remove content from being shown. Therefore you might not see anything here. In Markdown files, use  for comments. In Hugo templates and partials, use {{/* Comment */}}.

{{/* This is a comment */}} <– Visible because in markdown

{{/* This is a comment */}} <-- Visible because in markdown

<!-- Comment --> <-- Invisible because in markdown

Divider

A divider line can be done with ---

Links

Similar to images, links can also be inserted directly or by creating a reference. You can create both inline and block links.

[bentopdf]: https://github.com/alam00000/bentopdf
[copyparty]: https://github.com/9001/copyparty

[This is some longer link text](https://openfront.io/)
[A great free pdf editor to selfhost][bentopdf]
A nice way to share files is with [copyparty][copyparty]

This is some longer link text
A great free pdf editor to selfhost
A nice way to share files is with copyparty

Blockquotes

The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.

Blockquote without attribution

Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.

Blockquote with attribution

Don’t communicate by sharing memory, share memory by communicating. — Rob Pike¹

#### Blockquote without attribution

> Tiam, ad mint andaepu dandae nostion secatur sequo quae.
> **Note** that you can use _Markdown syntax_ within a blockquote.

#### Blockquote with attribution

> Don't communicate by sharing memory, share memory by communicating.<br>
> — <cite>Rob Pike[^1]</cite>

[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.

Tables

Tables aren’t part of the core Markdown spec, but Hugo supports supports them out-of-the-box.

Name	Age
Bob	27
Alice	23

Inline Markdown within tables

Italics	Bold	Code
italics	bold	`code`

| Name  | Age |
| ----- | --- |
| Bob   | 27  |
| Alice | 23  |

#### Inline Markdown within tables

| Italics   | Bold     | Code   |
| --------- | -------- | ------ |
| _italics_ | **bold** | `code` |

Code Blocks

Code block with backticks

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Example HTML5 Document</title>
  </head>
  <body>
    <p>Test</p>
  </body>
</html>

Code block indented with four spaces

<!doctype html> Example HTML5 Document Test

Currently does not seem to work

List Types

Ordered List

First item
Second item
Third item
A long text that will overflow into the next line. This is here to show how this theme deals with this (edge) case. Some times this does not look good and needs some extra styling.

Unordered List

List item
Another item
And another item

Nested list

Fruit
- Apple
- Orange
- Banana
Dairy
- Milk
- Cheese
Vegan
- Toppings
  - Hummus
  - Vegetable Spread
- Dishes
  - Shakshuka
  - Pumpking Soup
    - with Soy Sauce
    - A long text that will overflow into the next line. This is here to show how this theme deals with this (edge) case. Some times this does not look good and needs some extra styling.
  - Banana Bread

Checklists

Kimchi
Bread
Fruit
- Apples
- Bananas
A long text that will overflow into the next line. This is here to show how this theme deals with this (edge) case. Some times this does not look good and needs some extra styling.
- Nested
  - Checklists
    - Also
      - work!

Mixed List

One
Two
- Test
- Well
Three
1. Well
2. Cool

Cool.
Nice

New Lines in Lists

It is possible to have lists with new lines and bold sections like this:

Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Commodo risus nulla ridiculus nam varius porta montes bibendum purus erat elementum consectetur. Interdum sollicitudin sapien eros gravida sem integer velit volutpat magnis habitasse arcu fringilla. Natoque morbi vehicula mattis arcu etiam elit est magna lorem pretium sociis dignissim.
A fusce taciti vulputate
Sociosqu quisque ligula rhoncus adipiscing suspendisse facilisi suspendisse primis. Per at imperdiet iaculis eleifend rhoncus eleifend pharetra nostra rhoncus. Et hac facilisi tempus dignissim accumsan faucibus adipiscing mi quam. Dignissim dictumst tempor habitant aliquam nec mollis est nostra arcu.

Code Example

1. **Lorem ipsum dolor sit amet**  <-- Two spaces here
Consectetur adipiscing elit. Commodo risus nulla ridiculus nam varius porta montes bibendum purus erat elementum consectetur. Interdum sollicitudin sapien eros gravida sem integer velit volutpat magnis habitasse arcu fringilla. Natoque morbi vehicula mattis arcu etiam elit est magna lorem pretium sociis dignissim.
1. **A fusce taciti vulputate**  <-- Two spaces here
Sociosqu quisque ligula rhoncus adipiscing suspendisse facilisi suspendisse primis. Per at imperdiet iaculis eleifend rhoncus eleifend pharetra nostra rhoncus. Et hac facilisi tempus dignissim accumsan faucibus adipiscing mi quam. Dignissim dictumst tempor habitant aliquam nec mollis est nostra arcu.

Other Elements — abbr, sub, sup, kbd, mark

GIF is a bitmap image format.

H2O

Xn + Yn = Zn

Press CTRL+ALT+Delete to end the session.

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.

Pictures

A picture is included with the following syntax:

![Alt Text](/path/to/file "Text displayed on hover")

<!-- This also works -->
[logo]: https://user-images.githubusercontent.com/46372998/212541682-9907aaea-5198-45a9-8961-2acc8a98a0db.png "Hover me"
![error text][logo]

<!-- In Hugo, this applies -->
![Alt Text](filename.jpg) <!-- For post assets -->
![Alt Text](/img/filename.jpg) <!-- For global assets -->

analog1

Curabitur semper venenatis lectus viverra ex dictumst nulla maximus. Primis iaculis elementum conubia feugiat venenatis dolor augue ac blandit nullam ac phasellus turpis feugiat mollis. Duis lectus porta mattis imperdiet vivamus augue litora lectus arcu. Justo torquent pharetra volutpat ad blandit bibendum accumsan nec elit cras luctus primis ipsum gravida class congue.

analog1

Jump to section

You can give ID to a section so that you can jump straight to that part of the file from wherever you are.

[Jump to a section with custom ID](#some-id)

...

<a name="some-id" />

##### Section with some ID

Jump to a section with custom ID

In Hugo, it also works without the <a> tags and just the heading names can be used.

Hugo-Specific Things

All shortcodes are usually written with {{ and }}, but in these examples are escaped with \{ and \}, as Hugo otherwise replaces them with HTML.

Details Shortcode

See the details

This is a bold word. Unfortunately it is not possible to display the code here, as Hugo replaces it with HTML. More Information

\{\{< details summary="See the details" >\}\}
  This is a **bold** word.
  Unfortunately it is not possible to display the code here, as Hugo replaces it with HTML.
  [More Information](https://gohugo.io/shortcodes/details/)
\{\{< /details >\}\}

Hugo Figure Shortcode

\{\{< figure
  src="/img/painting.jpg"
  alt="A beautiful painting of unknown origin"
  caption="A beautiful painting of unknown origin"
  class="ma0 w-75"
  width="400px"
>\}\}

Code Highlight Shortcode

You can highlight specific code lines like here:

1package main
2
3import "fmt"
4
5func main() {
6    for i := 0; i < 3; i++ {
7        fmt.Println("Value of i:", i)
8    }
9}

With the following shortcode:

{{< highlight go "linenos=inline, hl_lines=6, style=monokai" >}}
package main

import "fmt"

func main() {
    for i := 0; i < 3; i++ {
        fmt.Println("Value of i:", i)
    }
}
{{< /highlight >}}

You can also change the style to a light one, like here:

<section class="project-meta">
  <h3 class="project-meta__title">Project Details</h3>

  <dl class="project-meta__list">
    <dt>Status</dt>
    <dd>{{ $page.Params.projectStatus }}</dd>
    
    <dt>Started</dt>

with using the style parameter:

{{< highlight text "style=RPGLE" >}}
<section class="project-meta">
  <h3 class="project-meta__title">Project Details</h3>

  <dl class="project-meta__list">
    <dt>Status</dt>
    <dd>{{ $page.Params.projectStatus }}</dd>
    
    <dt>Started</dt>
{{< /highlight >}}

All styles are visible here: Hugo Syntax Highlighting Styles.

Param Shortcode

See here.

Theme Specific Things

Callout Shortcode

With Icon:

⚠️

Careful!

You can combine icons with Notion-style callouts for gentle emphasis.

Without icon:

Note

Icons are completely optional.

All types

Note

This is a gentle note message.

Minimal

This is a minimal callout

Success

This is a success

Warning

This is a warning message.

Danger

This is a danger message

With Icon:

{{< callout type="warning" icon="⚠️" title="Careful!" >}}
You can combine icons with Notion-style callouts for gentle emphasis.
{{< /callout >}}

Without icon:

{{< callout type="note" title="Note" >}}
Icons are completely optional.
{{< /callout >}}

All types

{{< callout type="note" title="Note" >}}
This is a gentle note message.
{{< /callout >}}

{{< callout type="minimal" title="Minimal" >}}
This is a minimal callout
{{< /callout >}}

{{< callout type="success" title="Success" >}}
This is a success
{{< /callout >}}

{{< callout type="warning" title="Warning" >}}
This is a warning message.
{{< /callout >}}

{{< callout type="danger" title="Danger" >}}
This is a danger message
{{< /callout >}}

Image Shortcode

{{< image path=imm008_N8.jpg width=500 alt="A white kitten" >}}

A table of contents can be called at any location with

{{< table-of-content title="Contents" >}}

The title property is optional and can be left empty. And it looks like this:

P5 Sketches

The above quote is excerpted from Rob Pike’s talk during Gopherfest, November 18, 2015. ↩︎

Contents

Markdown Reference

Paragraph and Line Breaks

Text styling

Headings

H1

H2

H3

H4

H5

H6

Comments

Divider

Links

Blockquotes

Blockquote without attribution

Blockquote with attribution

Tables

Inline Markdown within tables

Code Blocks

Code block with backticks

Code block indented with four spaces

List Types

Ordered List

Unordered List

Nested list

Checklists

Mixed List

New Lines in Lists

Other Elements — abbr, sub, sup, kbd, mark

Pictures

Jump to section

Hugo-Specific Things

Details Shortcode

Hugo Figure Shortcode

Code Highlight Shortcode

Param Shortcode

Theme Specific Things

Callout Shortcode

Image Shortcode

Table of Contents

Contents

Tags

P5 Sketches