This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.

Headings

To create a heading, add number signs(#) in front of a word or phrase. The
The following HTML <h1><h6> elements represent six levels of section headings. <h1> is the highest section level while <h6> is the lowest.

image

For compatibility, always put a ** space** between the number signs and the heading name.

Paragraph

To create paragraphs, use a blank line to separate one or more lines of text.
Unless the paragraph is in a list, don’t indent paragraphs with spaces or tabs.

Line Break Best Practices

Fortunately, there is another option supported by nearly every Markdown application: the HTML tag.

image

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

To create a blockquote, add a > in front of a paragraph.

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 Pike1

List Types

You can organize items into ordered and unordered lists.

Ordered List

To create an ordered list, add line items with numbers followed by periods. The numbers don’t have to be in numerical order, but the list should start with the number one.

image

  1. xxx
    1. df
    2. df
  2. xxx
  3. xxx

Unordered List

To create an unordered list, add dashes (-), asterisks (*), or plus signs (+) in front of line items. Indent one or more items to create a nested list.

  • kjk
  • kjl
  • nkd

image

Starting Unordered List Items With Numbers

If you need to start an unordered list item with a number followed by a period, you can use a backslash () to escape the period.

image

Adding Elements in Lists

To add another element in a list while preserving the continuity of the list, blank a line and indent the element four spaces or one tab, as shown in the following examples.

  • jdfkjdk

  • dfdfdf

    djfkdjfk

  • kdjfkdjf

    jdkfjdkjf

  • dfdf

Tables

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

NameAge
Bob27
Alice23

Inline Markdown within tables

ItalicsBoldCode
italicsboldcode

Code Blocks

Code block with backticks(code fences) and Hugo highlight shortcode

Input:

```
html{linenos=table,hl_lines=[2,"5-8",10],linenostart=1}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>
```

Rendered output:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Example HTML5 Document</title>
</head>
<body>
  <p>Test</p>
</body>
</html>

Options:

  • linenos: configure line numbers. Valid values are true, false, table, or inline.table will give copy-and-paste friendly code blocks.
  • hl_lines: lists a set of line numbers or line number ranges to be highlighted.
  • linenostart=199: starts the line number count from 199.

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.


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