Hugo Markdown Syntax

2019-08-21

Hugo

Sources and links

Headers

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

H1

H2

H3

H4

H5

H6

Text Formatting

Emphasis, aka italics, with *asterisks* or _underscores_.
Strong emphasis, aka bold, with **asterisks** or __underscores__.
Combined emphasis with **asterisks and _underscores_**.
Strikethrough uses two tildes. ~~Scratch this.~~
For ``monospaced text``, use two "backquotes" instead.
For `inline code text`, use one "backquotes". Or 
For ```inline code text```, use three "backquotes".
For <ins>ins elements</ins> use html <ins></ins> tags  
For subscript you can yous <sub></sub> html tags. Example: H<sub>2</sub>0  
For superscript you can youse <sup></sup> html tags. Example: X<sup>2</sup>
The <mark> HTML element represents text which is marked </mark> and after mark tag is not marked

Emphasis, aka italics, with asterisks or underscores.
Strong emphasis, aka bold, with asterisks or underscores.
Combined emphasis with asterisks and underscores.
Strikethrough uses two tildes. ~~Scratch this.~~
For monospaced text, use two "backquotes" instead.
For inline code text, use one "backquotes".
For inline code text, use three "backquotes".
For ins elements use html ins tag
For subscript you can yous html tags. Example: H₂0
For superscript you can youse html tags. Example: X²
The HTML element represents text which is marked and after mark tag is not marked

Line Breaks

To create a line break or new line (<br>), end a line with two or more spaces, and then type return.

Line Break Best Practices
You can use two or more spaces (commonly referred to as "trailing whitespace") for line breaks in nearly every Markdown application, but it's controversial. It's hard to see trailing whitespace in an editor, and many people accidentally or intentionally put two spaces after every sentence. For this reason, you may want to use something other than trailing whitespace for line breaks. If your Markdown application supports HTML , you can use the <br> HTML tag.

For compatibility, use trailing white space or the
HTML tag at the end of the line.

There are two other options I don’t recommend using. CommonMark and a few other lightweight markup languages let you type a backslash () at the end of the line, but not all Markdown applications support this, so it isn’t a great option from a compatibility perspective. And at least a couple lightweight markup languages don’t require anything at the end of the line — just type return and they’ll create a line break.

Syntax highlight

For full configuration you can use documentation

```python {hl_lines=[3,4,"6-8"],tabWidth=2}
import re

class Citizen:
    def __init__(self, id, name, email, age):
        self.id = id
        self.name = self._is_valid_name(name)
        self.email = self._is_valid_email(email)
        self.age = self._is_valid_age(age)

    def _is_valid_name(self, name):
        if len(name) > 20:
            raise ValueError("Name cannot exceed 20 characters.")
        return name

import re

class Citizen:
    def __init__(self, id, name, email, age):
        self.id = id
        self.name = self._is_valid_name(name)
        self.email = self._is_valid_email(email)
        self.age = self._is_valid_age(age)

    def _is_valid_name(self, name):
        if len(name) > 20:
            raise ValueError("Name cannot exceed 20 characters.")
        return name

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

    <title>Example HTML5 Document</title>

<title>Example HTML5 Document</title>

Blockquotes

> **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.

Fusion Drive combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.

Blockquotes with Multiple Paragraphs

> Dorothy followed her through many of the beautiful rooms in her castle.
>
> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

Lists

Unordered

* Item 1
* Item 2
    * Item 2a
    * Item 2b

* Unordered list can use asterisks
- Or minuses
+ Or pluses

Item 1
Item 2
- Item 2a
- Item 2b
Unordered list can use asterisks

Or minuses

Or pluses
item1
- under iterm1

Ordered

1. Item 1
1. Item 2
1. Item 3
   1. Item 3a
   1. Item 3b

Item 1
Item 2
Item 3
1. Item 3a
2. Item 3b

Mixed

1. Item 1
  * item 1.1
  * item 1.2
1. Item2
  * item 2.1

Item 1

item 1.1
item 1.2

Item2

item 2.1

+ Integer molestie lorem at massa
+ Facilisis in pretium nisl aliquet
+ Nulla volutpat aliquam velit
  - Phasellus iaculis neque
  - Purus sodales ultricies
  - Vestibulum laoreet porttitor sem

Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem

* This is a list element
+ This is also a list element
- This is also a list element
 - This is a sublist element
 + Also a sublist element
     + Sublist level 2
     1. Numbered sublist
     2. Next item
        3. Next indent level

1. Numbered sublist
2. Next item
     1. Next indent level
        * Sublist non numbered
3. Back

This is a list element

This is also a list element

This is also a list element
This is a sublist element

Also a sublist element
- Sublist level 2
1. Numbered sublist
2. Next item
  3. Next indent level

Numbered sublist
Next item
1. Next indent level
  - Sublist non numbered
Back

Links

[link_name_to_google.com](https://www.google.com)

link_name_to_google.com

[link_name_to_google.com with title: Google's Hompages](https://www.google.com "Google's Hompage")

link_name_to_google.com with title: Google's Hompages

Anchor Links

First, make a anchor_name for link:

## Unordered {#anchor_name}

And than make o link to anchor_name

[odkaz na Lists --> Unordered](#anchor_name)

odkaz na Lists --> Unordered

Anchor Links to Another hugo page

We assume, that we want a link to hugo page in file with name 0062.WhatIsEmailEnvelopeAndEmailHeader.md. Open this file in text aditor and create a anchor to point in this file:

## Email Envelope vs Email Header {#email_envelope_vs_email_header}

Then you can use a hugo shortcode with or without this anchor link:

without anchor link:

[email header]({{< ref "0062.WhatIsEmailEnvelopeAndEmailHeader.md" >}})

or with previous created anchor link:

[email header]({{< ref "0062.WhatIsEmailEnvelopeAndEmailHeader.md#email_envelope_vs_email_header" >}})

Definition Lists

Markdown Extra implements definition lists. Definition lists are made of terms and definitions of these terms, much like in a dictionary. A simple definition list in Markdown Extra is made of a single-line term followed by a colon and the definition for that term.

Apple
:   Pomaceous fruit of plants of the genus Malus in 
    the family Rosaceae.

Orange
:   The fruit of an evergreen tree of the genus Citrus.

Apple: Pomaceous fruit of plants of the genus Malus in
the family Rosaceae.
Orange: The fruit of an evergreen tree of the genus Citrus.

Terms must be separated from the previous definition by a blank line. Definitions can span on multiple lines, in which case they should be indented. But you don’t really have to: if you want to be lazy, you could forget to indent a definition that span on multiple lines and it will still work:

Apple
:   Pomaceous fruit of plants of the genus Malus in 
the family Rosaceae.

Orange
:   The fruit of an evergreen tree of the genus Citrus.

Apple: Pomaceous fruit of plants of the genus Malus in
the family Rosaceae.
Orange: The fruit of an evergreen tree of the genus Citrus.

Colons as definition markers typically start at the left margin, but may be indented by up to three spaces. Definition markers must be followed by one or more spaces or a tab.

Definition lists can have more than one definition associated with one term:

Apple
:   Pomaceous fruit of plants of the genus Malus in 
    the family Rosaceae.
:   An American computer company.

Orange
:   The fruit of an evergreen tree of the genus Citrus.

Apple: Pomaceous fruit of plants of the genus Malus in
the family Rosaceae.; An American computer company.
Orange: The fruit of an evergreen tree of the genus Citrus.

You can also associate more than one term to a definition:

Term 1
Term 2
:   Definition a

Term 3
:   Definition b

Term 1
Term 2: Definition a
Term 3: Definition b

If a definition is preceded by a blank line, Markdown Extra will wrap the definition in

tags in the HTML output. For example, this:

Apple

:   Pomaceous fruit of plants of the genus Malus in 
    the family Rosaceae.

    ```bash
    if [[ "$stringvar" == *[sS]tring* ]]; then
    ```

Orange
:    The fruit of an evergreen tree of the genus Citrus.

Apple

Pomaceous fruit of plants of the genus Malus in
the family Rosaceae.

if [[ "$stringvar" == *[sS]tring* ]]; then

Orange

The fruit of an evergreen tree of the genus Citrus.

And just like regular list items, definitions can contain multiple paragraphs, and include other block-level elements such as blockquotes, code blocks, lists, and even other definition lists.

Term 1
:   This is a definition with two paragraphs. Lorem ipsum 
    dolor sit amet, consectetuer adipiscing elit. Aliquam 
    hendrerit mi posuere lectus.

    Vestibulum enim wisi, viverra nec, fringilla in, laoreet
    vitae, risus.

    ```bash
    if [[ "$stringvar" == *[sS]tring* ]]; then 
    ```

:   Second definition for term 1, also wrapped in a paragraph
    because of the blank line preceding it.

Term 2
:   This definition has a code block, a blockquote and a list.

        code block.

    > block quote
    > on two lines.

    1.  first list item
    2.  second list item

Term 1

This is a definition with two paragraphs. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit. Aliquam
hendrerit mi posuere lectus.

Vestibulum enim wisi, viverra nec, fringilla in, laoreet
vitae, risus.

if [[ "$stringvar" == *[sS]tring* ]]; then

Second definition for term 1, also wrapped in a paragraph
because of the blank line preceding it.

Term 2

This definition has a code block, a blockquote and a list.

code block.

block quote
on two lines.

first list item
second list item

Images

String	Description
!	When placed at the beginning of a traditional markdown link tag, it indicates this is an image tag.
[]	The square bracket is used to wrap the optional alt-text for the image.
()	The parenthesis is used to surround the reference to the image itself. This is placed directly after the square bracket.
../	When used in the link, it indicates a move up a directory.

![markdown_image_optional_alt_text](/img/post/posts/0001/markdown_logo.svg "my markdown logo")

markdown_image_optional_alt_text

Tables

Tables aren't part of the core Markdown spec, but Hugo supports them.

| ID  | Make      | Model   | Year |
| --- | --------- | ------- | ---- |
| 1   | Honda     | Accord  | 2009 |
| 2   | Toyota    | Camry   | 2012 |
| 3   | Hyundai   | Elantra | 2010 |

ID	Make	Model	Year
1	Honda	Accord	2009
2	Toyota	Camry	2012
3	Hyundai	Elantra	2010

Colons : can be used to align columns.

| Tables      | Are           | Cool         |
|:----------- |:-------------:| ------------:|
| align: left | align: center | align: right |
| align: left | align: center | align: right |
| align: left | align: center | align: right |

Tables	Are	Cool
align: left	align: center	align: right
align: left	align: center	align: right
align: left	align: center	align: right

You can also use inline Markdown.

| Inline     | Markdown  | In                | Table      |
| ---------- | --------- | ----------------- | ---------- |
| *italics*  | **bold**  | ~~strikethrough~~ | `code`     |

Inline	Markdown	In	Table
italics	bold	~~strikethrough~~	`code`

Task list

Acme Website task list
- [x] Get the home page up
- [x] Update Privacy Policy and Terms of Use
- [ ] Add the about page
- [ ] Start the blog 
- [ ] Enable contact us

Acme Website task list

Get the home page up
Update Privacy Policy and Terms of Use
Add the about page
Start the blog
Enable contact us

Block Quotations

When quoting long blocks of text from another writer, it is common (especially in the context of e-mail) to set it off from the main text by indenting it, possibly adding a vertical quotation line along the left margin. Markdown and re
StructuredText use different syntax for this, but you can combine their markup for block quotes by starting the first line of a quotation with one space and a right angle bracket (>), indenting all the remaining lines by one space
as well (do not add angle brackets to them).

Note that in reStructuredText, a block quotation cannot directly follow a code example block - if it does it will be treated as part of the example. A normal paragraph or an "empty comment" (a line with only two periods (..) and bl
ank lines before and after it) must separate them.

Every block quotation must have a blank line before and after it; they can use the same inline markup as ordinary paragraphs. Nested quotations are possible by following a block quotation with another that starts with two spaces and tw
o right angle brackets; this allows up to three levels of quotation (a fourth level is not possible since Markdown treats four leading spaces as a code example). While two right angle brackets can be adjacent, three adjacent right angl
e brackets are a doctest block (a special kind of code example block) in reStructuredText and must have spaces between them to prevent that interpretation:

> A block quotation will wrap and flow, and can have *inline*
``markup`` just like a regular paragraph.  It will be indented on
the left (and possibly the right) margins, and may have a vertical
quotation line on the left.

 >> With two spaces and two right angle brackets, a following block
 quotation will be doubly indented, and will have a second vertical
 quotation line along the left if quotation lines are generated.

  > >> A third level of quotation is the maximum level possible.

A block quotation will wrap and flow, and can have inline
markup just like a regular paragraph. It will be indented on
the left (and possibly the right) margins, and may have a vertical
quotation line on the left.

With two spaces and two right angle brackets, a following block
quotation will be doubly indented, and will have a second vertical
quotation line along the left if quotation lines are generated.

A third level of quotation is the maximum level possible.

Abbreviations

<abbr title="Graphics Interchange Format">GIF</abbr> is a bitmap image format.

GIF is a bitmap image format.

Sub

C<sub>6</sub>H<sub>12</sub>O<sub>6</sub>

C₆H₁₂O₆

Sup

X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>

Xⁿ + Yⁿ = Zⁿ

KBD

The <kbd> HTML element represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device.

Press <kbd>X</kbd> to win. Or press <kbd><kbd>CTRL</kbd>+<kbd>ALT</kbd>+<kbd>F</kbd></kbd> to show FPS counter.

Press X to win. Or press CTRL+ALT+F to show FPS counter.

Mark

The <mark> HTML element represents text which is marked or highlighted for reference or notation purposes due to the marked passage's relevance in the enclosing context.

<mark>As a unit of information in information theory, the bit has alternatively been called a shannon</mark>, named after Claude Shannon, the founder of field of information theory.

As a unit of information in information theory, the bit has alternatively been called a shannon, named after Claude Shannon, the founder of field of information theory.

hugo