Example 1: Basic Markdown Syntax

This article is translated from the Chinese original.

This is an H2 heading

This is an H3 heading

This is an H4 heading

This is an H5 heading

This is an H6 heading

Horizontal rules

Emphasis

This is bold text

This is italic text

Strikethrough

Quotes

“Double quotes” and ‘single quotes’

Blockquotes

Blockquotes can also be nested…

…by using additional greater-than signs next to each blockquote marker…

Footnotes

An example containing a clickable footnote¹ linked to its source.

A second example containing a footnote² linked to its source.

If you look at this example in src/content/post/markdown-elements/index.md, you will see that the footnotes and the “Footnotes” heading are appended to the bottom of the page through the remark-rehype plugin.

Lists

Unordered list

• Create a list by using +, -, or * at the start of a line
• Nested lists are created by indenting two spaces:
  • Changing the marker character forces a new list to start:
    • Ac tristique libero volutpat at
    • Facilisis in pretium nisl aliquet
    • Nulla volutpat aliquam velit
• Very easy!

Ordered list

1. Lorem ipsum dolor sit amet

2. Consectetur adipiscing elit

3. Integer molestie lorem at massa

4. You can use sequential numbers…

5. …or set them all to 1.

Starting from an offset:

57. foo
58. bar

Code

Inline code

Indented code

// Some comments
line 1 of code
line 2 of code
line 3 of code

Fenced code block

Sample text here...

Syntax highlighting

var foo = function (bar) {
  return bar++;
};

console.log(foo(5));

Expressive Code examples

Add a title

console.log("Title example");

Bash terminal

echo "A base terminal example"

Highlight code lines

function demo() {
  console.log("this line is marked as deleted");
  // This line and the next one are marked as inserted
  console.log("this is the second inserted line");

  return "this line uses the neutral default marker type";
}

Expressive Code can do far more than what is shown here, and it includes many custom options.

Tables

Table alignment

Keyboard elements

Images

Image in the same folder: src/content/post/demo/markdown-elements/logo.png

Links

Content from Markdown-it