# Extended Syntax
A reference to the extended Markdown syntax elements that add features beyond the basic syntax.

{{< callout icon="info-circle" >}}
Refer to the [Extended Syntax](https://markdownguide.offshoot.io/extended-syntax/) reference guide from The Markdown Guide for more information.
{{< /callout >}}

## Table

```md
| Syntax    | Description |
| --------- | ----------- |
| Header    | Title       |
| Paragraph | Text        |
```

{{< preview >}}

| Syntax    | Description |
| --------- | ----------- |
| Header    | Title       |
| Paragraph | Text        |

{{< /preview >}}

## Fenced Code Block

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

{{< preview >}}

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

{{< /preview >}}

## Footnote

```md
Here's a sentence with a footnote. [^1]

[^1]: This is the footnote.
```

{{< preview >}}

Here's a sentence with a footnote. [^1]

[^1]: This is the footnote.

{{< /preview >}}

## Heading ID

```md
### My Great Heading{#custom-id}
```

{{< preview >}}

### My Great Heading{#custom-id}

{{< /preview >}}

### Rendered HTML

```html
<h3 id="custom-id">My Great Heading</h3>
```

## Definition List

```md
term
: definition
```

{{< preview >}}

term
: definition

{{< /preview >}}

## Strikethrough

```md
~~The world is flat.~~
```

{{< preview >}}

~~The world is flat.~~

{{< /preview >}}

## Task List

```md
- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media
{.list-unstyled}
```

{{< preview >}}

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media
{.list-unstyled}

{{< /preview >}}

## Emoji

{{< callout icon="outline/info-circle" >}}
Copy the emoji shortcode from [Emoji Cheat Sheet](https://www.webfx.com/tools/emoji-cheat-sheet/) by clicking on the emoji.
{{< /callout >}}

<div class="expressive-code">
  <figure class="frame not-content">
  <figcaption class="header">
    <span class="title"></span>
  </figcaption>
  <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-md" data-lang="md"><span class="line"><span class="cl">That is so funny! &#58;joy:</span></span></code></pre></div>
  </figure>
</div>

{{< preview >}}

That is so funny! :joy:

{{< /preview >}}

## Unsupported elements

{{< callout icon="outline/info-circle" >}}
Hugo does not [support](https://www.markdownguide.org/tools/hugo/#hugo-markdown-support) the highlight, subscript, and superscript elements. Use the HTML element itself instead.
{{< /callout >}}

### Highlight

```md
I need to highlight these <mark>very important words</mark>.
```

{{< preview >}}

I need to highlight these <mark>very important words</mark>.

{{< /preview >}}

### Subscript

```md
H<sub>2</sub>O
```

{{< preview >}}

H<sub>2</sub>O

{{< /preview >}}

### Superscript

```md
X<sup>2</sup>
```

{{< preview >}}

X<sup>2</sup>

{{< /preview >}}