MARKDOWN EXAMPLES

Hugo is a popular static site generator that uses Markdown as its default content format. Here are some examples of Markdown elements commonly used in Hugo. See markdown guide for more detailed information what Markdown elements Hugo supports.

See config.toml file how to enable raw html in markdown files if needed.

Introduction

Above added <!--more--> in this markdown is excerpt of post what shows in search engine search results, so keep it recommended 160 characters for good SEO result.

{{<table_of_content>}} shortcode adds Table Of Content anywhere in your page where you insert it.

Text formatting

Hello, this is a paragraph.

The paragraph starts here… …and doesn’t end until here.

This is emphasized text!

This is also emphasized text!

This is strong text!

This is also strong text!

In JavaScript, use console.log() to print to the console.

Of all the things I’ve lost I miss my mind the most. - Mark Twain

A & B α 1 < 2

This is an *example with an asterisk*.

OMG _this_ had better not have emphasis…

This Word is bold

Italic Text

Italic Text

Bold Text

Bold Text

Italic and Bold Text

Italic and Bold Text

This text is struckthrough. This one isn’t.

The world is flat. We now know that the world is round.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading with custom id

Add header custom id {#custom-id} for using custom styling or scripts

Blockquote

This is a blockquote.

This is the second paragraph in the blockquote.

This is an H2 in a blockquote

This is an embedded section. The section continues here

This is another embedded section. This section also continues in the second like

Add blockquote inside

another blockquote

Escape styling

Escape styling like this

*literally* should be emphasized text

and this should be **bold text**

I strongly recommend against using any <blink> tags.

Lines

Add lines in your markdown like this

hr lines with - - -

or * * *

or ***

or ---

Bullet listing in paragraph

• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean fringilla velit sit amet lectus tincidunt, quis suscipit tortor maximus. Vestibulum facilisis sit amet tortor sed vestibulum.

  Sed nec egestas leo. Nam tristique tincidunt venenatis. Vestibulum vel justo tincidunt, aliquet sapien vitae, vestibulum ex.

  Donec commodo, nunc in posuere condimentum, diam est gravida ex, quis varius nisi neque et nunc.

• Nulla facilisi. Mauris eleifend felis a purus pretium egestas

Tables

table without table-bordered class

Formatting table

table with left – center – right align

table all columns aligned center

Listing

• Item 1
• Item 2
• Item 3

• Item 1
• Item 2
• Item 3

• Item 1

• Item 2

• Item 3

• Item 1

  • Sub-item 1
  • Sub-item 2

• Item 2

  • Sub-item 1

45. Item 1
46. Item 2
47. Item 3

• Point 1
• Point 2
• Point 3

1. Red
2. Green
3. Blue

• Unordered list can use asterisks

• Or minuses

• Or pluses

1. First item
2. Second item
3. Third item
   1. Indented item
   2. Indented item
4. Fourth item

more test

• 1. item
  • 1.1. item
    • 1.1.2. item
    • 1.1.3. item
    • 1.1.4. item
  • 1.2. item
    • 1.2.1. item which has long text lorem ipsum random raa
    • 1.2.2. item
    • 1.2.3. item
  • 1.3. item
• 2. item

Terms

First Term

This is the definition of the first term.

Second Term headline

This is one definition of the second term.

This is another definition of the second term.

Links

Markdown supports two styles for creating links: inline and reference. With both styles, you use square brackets to delimit the text you want to turn into a link.

Inline-style links use parentheses immediately after the link text. For example:

This is an example link .

The quick brown fox, jumped over the lazy dog .

Here’s a link to Google , you guys.

The quick brown fox , jumped over the lazy dog .

http://google.com

address@example.com

https://ghost.org

Disabling Automatic URL Linking

http://www.example.com

Output:

<p>This is an <a href="http://example.com/">
example link</a>.</p>

Optionally, you may include a title attribute in the parentheses:

This is an example link .

Output:

<p>This is an <a href="http://example.com/" title="With a Title">
example link</a>.</p>

I’m an inline-style link

I’m an inline-style link with title

I’m a reference-style link

I’m a relative reference to a repository file

You can use numbers for reference-style link definitions

Or leave it empty and use the link text itself .

URLs and URLs in angle brackets will automatically get turned into links. http://www.example.com or http://www.example.com and sometimes example.com (but not on Github, for example).

Some text to show that the reference links can follow later.

Reference-style links allow you to refer to your links by names, which you define elsewhere in your document:

I get 10 times more traffic from Google than from Yahoo or MSN .

Output:

<p>I get 10 times more traffic from <a href="http://google.com/"
title="Google">Google</a> than from <a href="http://search.yahoo.com/"
title="Yahoo Search">Yahoo</a> or <a href="http://search.msn.com/"
title="MSN Search">MSN</a>.</p>

The title attribute is optional. Link names may contain letters, numbers and spaces, but are not case sensitive:

I start my morning with a cup of coffee and The New York Times .

Output:

<p>I start my morning with a cup of coffee and
<a href="http://www.nytimes.com/">The New York Times</a>.</p>

Footnotes

Here’s a simple footnote,¹ and here’s a longer one.²

You can easily add footnotes ³ in the continuous text ¹.

Images

Here’s our logo (hover to see the title text):

Inline-style:

Reference-style:

Videos

Youtube

Vimeo

Code blocks

sh code block

name = 'Scott'
print 'Hi my name is ' + name

bash code block

apt-get update
apt-get upgrade

html code block

<div class="blog-listing"> 
        <div class="content">
          <hr class="title-hr">

toml code block

[author]
  name = ""
  homepage = ""

yaml code block

[author]
  name = ""
  homepage = ""

json code block

{
 "content":"\nTitle here Date here Summary here ",
 "date":"1 January, 0001",
 "id":13,
 "permalink":"/search/",
 "summary":"",
 "tags":"",
 "title":"Search"
}

css code block

/* remove a bit of padding from the file list entries */
#listing.list .item {
    padding: 0.7em;
}

/* make folders yellow-ish */
#listing .item[data-dir=true] div i {
    color: #ffc84b;
}

javascript code block

<script>
  var el = document.querySelector('.navbar-icon');

el.onclick = function() {
  el.classList.toggle('open');
}

var el = document.querySelector('.navbar-menu nav');

el.onclick = function() {
  el.classList.toggle('open');
}
</script>

Conclusion

These are some of the common Markdown elements supported by Hugo. You can refer to Hugo’s documentation or configuration files to customize your Markdown rendering options or enable raw HTML if needed.

Remember that the exact Markdown syntax and behavior may vary depending on the specific configuration and theme you are using with Hugo.