Markdown Test
1 Markdown Test
1.1 Horizontal Rules
The HTML <hr>
element is for creating a “thematic break” between paragraph-level elements.
In Markdown, you can create a <hr>
with any of the following:
___
: three consecutive underscores---
: three consecutive dashes***
: three consecutive asterisks
The rendered output looks like this:
2 Emphasis
2.1 Bold
For emphasizing a snippet of text with a heavier font-weight.
The following snippet of text is rendered as bold text.
|
|
The rendered output looks like this:
rendered as bold text rendered as bold text
2.2 Italics
For emphasizing a snippet of text with italics.
The following snippet of text is rendered as italicized text.
|
|
The rendered output looks like this:
rendered as italicized text rendered as italicized text
2.3 Strikethrough
In GFM you can do strikethroughs.
|
|
The rendered output looks like this:
Strike through this text.
2.4 Combination
Bold, italics, and strikethrough can be used in combination.
|
|
The rendered output looks like this:
bold and italics
strikethrough and bold
strikethrough and italics
bold, italics and strikethrough
3 Blockquotes
For quoting blocks of content from another source within your document.
Add >
before any text you want to quote:
|
|
The rendered output looks like this:
Hugo is the fastest tool of its kind. At <1 ms per page, the average site builds in less than a second.
Blockquotes can also be nested:
|
|
The rendered output looks like this:
Hugo’s shortcodes are Markdown’s hidden superpower.
We love the beautiful simplicity of markdown’s syntax, but there are times when we want more flexibility. Hugo shortcodes allow for both beauty and flexibility.
4 Lists
4.1 Unordered
A list of items in which the order of the items does not explicitly matter.
You may use any of the following symbols to denote bullets for each list item:
|
|
For example:
|
|
The rendered output looks like this:
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
4.2 Ordered
A list of items in which the order of items does explicitly matter.
|
|
The rendered output looks like this:
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
If you just use 1.
for each number, Markdown will automatically number each item. For example:
|
|
The rendered output looks like this:
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
5 Definition Lists
|
|
The rendered output looks like this:
- Alex
- Web Developer
- Technophile
- Mark
- SysAdmin
- Construction Worker
6 Task Lists
Task lists allow you to create a list of items with checkboxes. To create a task list, add dashes (-
) and brackets with a space ([ ]
) before task list items. To select a checkbox, add an x in between the brackets ([x]
).
|
|
The rendered output looks like this:
- Write the press release
- Update the website
- Contact the media
7 Code
7.1 Inline Code
Wrap inline snippets of code with `
.
|
|
The rendered output looks like this:
In this example, <section></section>
should be wrapped as code.
7.2 Indented Code
Or indent several lines of code by at least four spaces, as in:
|
|
The rendered output looks like this:
// Some comments
line 1 of code
line 2 of code
line 3 of code
7.3 Block Fenced Code
Use “fences” ```
to block in multiple lines of code with a language attribute.
|
|
7.4 Syntax Highlighting
GFM also supports syntax highlighting.
To activate it, simply add the file extension of the language you want to use directly after the first code “fence”,
```js
, and syntax highlighting will automatically be applied in the rendered HTML.
For example, to apply syntax highlighting to JavaScript code:
|
|
The rendered output looks like this:
|
|
8 Links
8.1 Basic Link
|
|
The rendered output looks like this (hover over the link, there is no tooltip):
8.2 Add a Title
|
|
The rendered output looks like this (hover over the link, there should be a tooltip):
8.3 Named Anchors
Named anchors enable you to jump to the specified anchor point on the same page. For example, each of these chapters:
|
|
will jump to these sections:
|
|
9 Footnotes
Footnotes allow you to add notes and references without cluttering the body of the document. When you create a footnote, a superscript number with a link appears where you added the footnote reference. Readers can click the link to jump to the content of the footnote at the bottom of the page.
To create a footnote reference, add a caret and an identifier inside brackets ([^1]
). Identifiers can be numbers or words, but they can’t contain spaces or tabs. Identifiers only correlate the footnote reference with the footnote itself — in the output, footnotes are numbered sequentially.
Add the footnote using another caret and number inside brackets with a colon and text ([^1]: My footnote.
). You don’t have to put footnotes at the end of the document. You can put them anywhere except inside other elements like lists, block quotes, and tables.
|
|
This is a digital footnote1.
This is a footnote with “label”2
Also see these posts for Table Test; Image Test and Emojis
10 Reference
-
Atishay Jain, Hugo in action Static sites and dynamic Jamstack apps, 2019. ↩︎