MDX Feature Showcase

4/3/2024 / 5 minutes to read / Tags: test, mdx

This post showcases some of the Markdown and MDX features you can use.

Headings

You can use different levels of headings:

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Text Formatting

You can use italic, bold, and bold italic text. You can also use inline code.

This is a blockquote. It’s useful for highlighting important information or quoting someone.

Lists

Unordered List

• Item 1
• Item 2
  • Sub-item 2.1
  • Sub-item 2.2
• Item 3

Ordered List

1. First item
2. Second item
3. Third item

Code Blocks

Syntax highlighting is supported. Here’s a JavaScript example:

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet('World');

And a Python example:

def add(a, b):
  """This function adds two numbers."""
  return a + b

result = add(5, 3)
print(f"The result is: {result}")

You can also specify titles and highlight lines:

function importantFunction() {
  console.log("This line is important!"); // This line will be highlighted
}

Links

You can create links easily: Visit Astro’s Website.

Images

You can embed images using standard Markdown syntax (ensure the path is correct):

![Alternative text](../../assets/pfp.png)

(The above is just the Markdown code, the actual image would render here if the path is valid)

Other MDX Features

MDX allows embedding components, but this example focuses on standard Markdown features enhanced by the theme’s styling and Expressive Code for code blocks. You can explore Astro’s MDX documentation for more advanced usage.