Test Blog Post: Exploring Features

Welcome to the Test Post!
Markdown
Math Rendering with KaTeX
MDX Capabilities
Admonitions
Buttons
Tables
Animations
Interactive Components (JSX)
Interactive Components
Custom JSX Logic
References
Using Citations
Custom Placement
Conclusion

Welcome to the Test Post!

This post is a test of various features that can be used in this Astro blog.

Markdown

Blockquotes:

This is a blockquote. It’s useful for highlighting text from other sources.

Code blocks:

// This is a JavaScript code block
function greet(name) {
  console.log(`Hello, ${name}!`);
}
greet('World');

Math Rendering with KaTeX

This blog supports math rendering using KaTeX! Here are some examples that demonstrate the LaTeX-style math rendering capabilities.

Inline Math

In physics, the famous equation

E = mc^2

relates energy and mass. The Pythagorean theorem states that

a^2 + b^2 = c^2

for right triangles. The quadratic formula

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

gives solutions to quadratic equations.

For complex numbers, we have

e^{i\theta} = \cos\theta + i\sin\theta

. The probability density function of a normal distribution is

f(x) = \frac{1}{\sigma\sqrt{2\pi}}e^{-\frac{1}{2}\left(\frac{x-\mu}{\sigma}\right)^2}

Block Math

The definition of a derivative:

f'(x) = \lim_{h \to 0} \frac{f(x+h) - f(x)}{h}

Euler’s identity, one of the most beautiful equations in mathematics:

e^{i\pi} + 1 = 0

The Gaussian integral:

\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

Equation Systems and Alignment

Maxwell’s equations in differential form:

\begin{aligned} \nabla \cdot \vec{E} &= \frac{\rho}{\varepsilon_0} \\ \nabla \cdot \vec{B} &= 0 \\ \nabla \times \vec{E} &= -\frac{\partial \vec{B}}{\partial t} \\ \nabla \times \vec{B} &= \mu_0 \vec{J} + \mu_0 \varepsilon_0 \frac{\partial \vec{E}}{\partial t} \end{aligned}

MDX Capabilities

Since this blog supports MDX, you can import and use components. Here are some examples of the components we’ve created:

Admonitions

Admonitions are great for highlighting important information:

Note

This is a compact note admonition.

Pro Tip

You can customize the title of admonitions.

Info

Admonitions come in different types.

Warning

Be careful with this feature!

Danger

This action cannot be undone!

Info

These are the standard-sized admonitions with more detailed information. They’re perfect for when you need to provide more context or explanation about a particular topic or feature.

Buttons

Buttons can be used for calls to action:

Link Button

Tables

Tables are useful for displaying structured data:

Components in this blog

Name	Type	Description
Button	Component	Interactive button element
Admonition	Component	Highlighted information box
Math	Component	LaTeX math rendering
Animation	Component	Animated elements
Table	Component	Structured data display

Animations

Add some life to your content with animations:

This content fades in.

This content slides in from below.

This content bounces infinitely.

Interactive Components (JSX)

MDX allows you to use interactive components directly in your markdown. Here’s a counter component:

Basic Counter

Interactive Components

Confetti Celebration

Click the button below to trigger a full-page confetti celebration:

Custom JSX Logic

MDX allows you to include custom JSX logic directly in your markdown:

This text has a green highlight and this text has a blue highlight.

Today’s date is: Thu May 22 2025

References

Using Citations

You can cite sources using the Cite component like this [first-citation] and this [second-citation] . The citations will appear where you place the References component.

Custom Placement

The key difference is that you can now control where your references appear by placing the <References> component in your MDX file.

<References title="References">
  <Citation id="first-citation">
    This is the first citation.
  </Citation>
  <Citation id="second-citation">
    This is the second citation.
  </Citation>
</References>

You can also customize the title or omit it:

<References title="Sources">
  <Citation id="example1">
    Citation content here
  </Citation>
</References>

<!-- Or without a title -->
<References>
  <Citation id="example2">
    Another citation here
  </Citation>
</References>

References

[first-citation]

This is the first citation. It can include links, formatting, and other Markdown elements.

[second-citation]

Smith, J. (2025). How to Use References in MDX. Example Publishing.

Conclusion

This post demonstrates the powerful capabilities of MDX in Astro, allowing you to combine the simplicity of Markdown with the flexibility of JSX components. You can create rich, interactive content that goes beyond what traditional Markdown can offer.