My First MDX Post with Highlighter

This is a sample post demonstrating MDX capabilities and the custom Highlighter component.

Welcome to my new blog!

This is an example of how MDX works. You can write Markdown as usual, but you can also import and use React components directly.

Using the Highlighter Component

Here is a standard paragraph. But what if we want to highlight something special?

This text is highlighted using our custom component!

We can also do other annotations like:

  • Boxing text

  • Circling text

  • Underlining text

  • Striking through text

Syntax Highlighting

Astro’s MDX integration comes with Shiki built-in for syntax highlighting.

// This is a code block
function helloWorld() {
  console.log("Hello, world!");
}
# Python code block
def hello_world():
    print("Hello, world!")