Using MDX

Paragraph

This is a paragraph.

This is a paragraph with just a few more words and just a few more words and just a few more words and just a few more words.

Images / Videos/Audios (function extension of this astro theme)

![alt text](sample-image.png)

<a href='./sample-image.png'>
  <picture>
    <source srcset='sample-image.avif' />
    <source srcset='sample-image.dark.avif' media='(prefers-color-scheme: dark)' />
    <img src='sample-image.avif' alt='alt text' height='1024', width='1024' loading='lazy' />
  </picture>
</a>

![sample-video.vtt](sample-video.mkv)

This HTML output is stolen from MDN: Adding Captions and Subtitles to Video.

<video controls preload='metadata'>
  <source src='sample-video.mkv' />
  <track
    src='sample-video.vtt'
    default />
</video>

![sample-audio.vtt](sample-audio.opus)

Using <video> instead of <audio> here because <audio> doesn't support webvtt.

<video controls preload='metadata'>
  <source src='sample-audio.opus' />
  <track
    src='sample-audio.vtt'
    default />
</video>

Alerts

<CalloutAlert data-type="note">Highlights information that users should take into account, even when skimming.</CalloutAlert>

Blockquotes

> Don't communicate by sharing memory, share memory by communicating.
>
> <cite>Rob Pike[^1]</cite>

Don't communicate by sharing memory, share memory by communicating.

Rob Pike (The above quote is excerpted from Rob Pike's talk during Gopherfest, November 18, 2015.)

Tables

| Italics | Bold | Code |
| --------- | -------- | ------ |
| _italics_ | **bold** | `code` |

UML

start
:Hello world;
:This is defined on
several **lines**;
stop

<a href='./hello-world.pu'>
  <picture>
    <source srcset='hello-world.svg' />
    <source srcset='hello-world.dark.svg' media='(prefers-color-scheme: dark)' />
    <img src='hello-world.svg' alt='alt text' height='1024', width='1024' loading='lazy' />
  </picture>
</a>

List

-   <p>Fruit</p>
    -   Apple
    -   Orange
    -   Banana
    -   <p>Dairy</p>
        1.  Milk
        2.  Cheese

• Fruit

  • Apple
  • Orange
  • Banana

  • Dairy

    1. Milk
    2. Cheese

Other: abbr, sub, sup, kbd, mark, del

<abbr title='Graphics Interchange Format'>GIF</abbr> is a bitmap image format.

H<sub>2</sub>O X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>

Press <kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd> to end the session.

Most <mark>salamanders</mark> are nocturnal, and hunt for insects, worms, and other small creatures.

~~strikethrough~~

GIF is a bitmap image format.

H₂O Xⁿ + Yⁿ = Zⁿ

Press CTRL + ALT + Delete to end the session.

Most salamanders are nocturnal, and hunt for insects, worms, and other small creatures.

strikethrough