Body text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Headings

The quick brown fox jumped over the lazy dog.

Formatting

This text is bold. This text is italic. Note: Markdown reserves underlining for links, so you can’t underline text otherwise.

Blockquotes

This is a blockquote.

This is a nested blockquote.

Lists

Links

Markdown supports links, too.

Code

Code can be written inline, i.e. getState(), or in blocks, where you can (with MDX) do any of the following;

• Declare a language used, to provide color to the code
• Collapse verbose lines of code, allowing them to be made visible with a click of a button
• (Optionally) show line numbers
• Highlight certain important line(s) of code
• And more!

1
import { getCollection, type CollectionEntry } from 'astro:content'
2

3
export async function getAllPosts(): Promise<CollectionEntry<'blog'>[]> {
4 collapsed lines
4
  const posts = await getCollection('blog')
5
  return posts
6
    .filter((post) => !post.data.draft)
7
    .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
8
}

Math

Much like code, math can also be written inline; $A = \pi r^2$, or in blocks:

Images

You can embed images in Markdown:

Videos

I do not recommend adding video files to the source tree (or in Markdown) due to their sheer size. Instead, I recommend using YouTube or a similar hosting service. YouTube videos can be embedded by copying the HTML embed code directly into the MDX file. If given width and height parameters in your <iframe>, replace them with class="w-full aspect-video" to ensure they do not overflow on small screens.

Callouts

Place these at the top of the MDX file:

import Callout from '@/components/Callout.astro'
import { Icon } from 'astro-icon/components'

Then, use the <Callout> tag:

1
import csv
2
import hashlib
3
import random
4
import shutil
5
import subprocess
6
import time
7
import uuid
8
from pathlib import Path

Several types of callouts exist. These include, but are not limited to:

A full list of these callouts can be seen in the Callout.astro file.

Keyboard Keys

You can add keyboard keys that look like real keys using the <kbd> tag. For example, Ctrl+Alt+Del.