1. Image with a Caption​

Here's an example of a single image with a caption:

2. Two Images Side by Side​

Use the ImageWrapper component to display images side by side:

3. Expandable Information Note​

Use <details> and <summary> tags to create expandable sections:

Click to expand and see more information

Here's the hidden content that appears when you expand this section.

You can include any content here:

• Lists
• Images
• Code blocks
• Links

4. Example Note​

Use the :::note syntax to create informational notes:

5. SVG Image​

SVG images are handled the same way as regular images:

6. Command Line Code​

Display command-line code with syntax highlighting:

Bash Example​

echo hello world

JSON Example​

{
  "lorem": {
    "ipsum": {
      "dolor": "sit amet",
      "consectetur": "adipiscing elit",
      "sed": {
        "do": "eiusmod tempor",
        "incididunt": 42
      }
    }
  }
}

7. Table​

Create tables using standard Markdown syntax:

Basic Table​

Glossary Table​

8. Math Equations (KaTeX)​

You can write beautiful math equations using KaTeX:

Inline Math​

Write inline math by wrapping LaTeX equations between $:

Let $f\colon[a,b]\to\mathbb{R}$ be Riemann integrable. Let $F\colon[a,b]\to\mathbb{R}$ be $F(x)=\int_{a}^{x} f(t)\,dt$. Then $F$ is continuous, and at all $x$ such that $f$ is continuous at $x$, $F$ is differentiable at $x$ with $F'(x)=f(x)$.

Block Math​

For display mode equations, use $$:

Interactive Code Snippet​

Here is an example of using the Rust Playground to create an interactive code snippet:

fn main() {
    let hidden = HiddenStruct::new();
    println!("We have: {:?}", hidden);
}

Conclusion​

This example post demonstrates all the key MDX components you can use in your blog posts. Mix and match these elements to create engaging and informative content!