Extended Syntax

These elements extend the basic syntax by adding additional features. Not all Markdown applications support these elements.

Fenced Code Block

This is how a Fenced Code Block is displayed:

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

This is how a Fenced Code Block is written in markdown:

```
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
```

Footnote

This is how a footnote is displayed: Here's a sentence with a footnote. ¹

Note: please go to the bottom of the page to see the footnote.

This is how a footnote is written in markdown:

Here's a sentence with a footnote. [^1]
...
[^1]: This is the footnote.

Strikethrough

This is how a strikethrough text is displayed:

The world is flat.

This is how a strikethrough text is written in markdown:

~~The world is flat.~~

Task List

This is how a task list is displayed:

• Write the press release
• Update the website
• Contact the media

This is how a task list is written in markdown:

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

Alert

This is how an Info Alert is displayed:

This is how an Info Alert is written:

<alert>
Check out an info alert with a `codeblock` and a [link](/themes/docs)!
</alert>

This is how a Success Alert is displayed:

This is how a Success Alert is written:

<alert type= 'success'>
Check out an success alert with a `codeblock` and a [link](/themes/docs)!
</alert>

This is how a Warning Alert is displayed:

This is how a Warning Alert is written:

<alert type= 'warning'>
Check out an info alert with a `codeblock` and a [link](/themes/docs)!
</alert>

This is how a Danger Alert is displayed:

This is how a Danger Alert is written:

<alert type = 'danger'>
Check out an danger alert with a `codeblock` and a [link](/themes/docs)!
</alert>

List

This is how a list is displayed:

This is how a list is written in markdown:

---
items:
  - Item1
  - Item2
  - Item3
---

<list :items="items"></list>

Badge

This is how a badge is displayed: v1.2+

This is how a badge is written in markdown:

<badge>v1.2+</badge>

Code Block

This is how a code-block is displayed:

yarn add @nuxt/content-theme-docs

npm install @nuxt/content-theme-docs

This is how a code-block is written in markdown:

# Backslashes are for demonstration

<code-group>
  <code-block label="Yarn" active>

  ```bash
  yarn add @nuxt/content-theme-docs
  \```

  </code-block>
  <code-block label="NPM">

  ```bash
  npm install @nuxt/content-theme-docs
  \```

  </code-block>
</code-group>

Videos

This is how a video is displayed:

This is how a video is written in markdown:

<video loop playsinline controls>
  <source src="./example.mp4" type="video/mp4" />
</video>

Twitter

This is how a twitt is displayed:

This is how a twitt is written in markdown:

<blockquote class="twitter-tweet"><a href="https://twitter.com/rlangvad/status/1352940444200669186?ref_src=twsrc%5Etfw"></a></blockquote>

YouTube

This is how a youtube reference is displayed:

This is how a youtube reference is written in markdown:

<YoutubeSubscribeButton identifier="my-subscribe-button" channel="GoogleDevelopers"></YoutubeSubscribeButton>