TinyBones

MDX Syntax Example

Aug 21 3 min read

Table of Contents

MDX in TinyBones

This blog supports MDX (Markdown with JSX), allowing you to use React-like components directly in your markdown content. MDX combines the simplicity of markdown with the power of components.

Using Tabs Component

The blog also includes a Tabs component that allows you to organize content into separate tabs. This is perfect for showing different approaches, code examples in different languages, or organizing related information:

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet("World"));
def greet(name):
    return f"Hello, {name}!"

print(greet("World"))
function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet("World"));

You can also use tabs for different types of content:

This is a general overview of the feature. It provides a high-level explanation that’s accessible to all readers regardless of their technical background.

Here are the technical implementation details: - Uses client-side JavaScript for interactivity - Fully accessible with keyboard navigation - Supports dark/light theme transitions - Built with Tailwind CSS for consistent styling

Note

You can even include other components inside tab panels!

This demonstrates how flexible the tabs component is for organizing content.

The Code

To use the Tabs component in your MDX file, import both components at the top:

import Tabs from "@/components/mdx/Tabs.astro"; import TabPanel from
"@/components/mdx/TabPanel.astro";

Then use them like this:

<Tabs defaultTab={1}>
  <TabPanel title="First Tab">Content for the first tab goes here.</TabPanel>
  <TabPanel title="Second Tab">Content for the second tab goes here.</TabPanel>
</Tabs>

Using InfoBox Component

The blog comes with a built-in InfoBox component that you can use to display admonitions. Here’s how to use it:

Information

This is a default information box that you can use to highlight important information.

Warning

This is a warning box to alert users about potential issues.

Danger

This is an error box to indicate something that went wrong.

Note

This is a note box for additional context or asides.

Custom Titles and Icons

You can customize both the title and icon of the InfoBox:

Custom Title

This InfoBox has a custom title instead of the default “Information” and a custom icon.

The Code

To use the InfoBox component in your MDX file, first import it at the top of your file:

---
title: Your Blog Post Title
description: Your description here
publicationDate: 2025-08-21
---

import InfoBox from "@/components/mdx/InfoBox.astro";
import { CircleHelp } from "lucide-astro";

# Your content here

<InfoBox type="info">Your important information here.</InfoBox>

Available InfoBox Types

The InfoBox component supports the following types:

  • info (default)
  • warning
  • danger
  • note

But of course you can add your own with ease.

Creating Your Own Components

You can create your own components and use them in MDX. Just create a new .astro file in the src/components/mdx/ directory, and then import and use it in your MDX files.

Developer Note

MDX is a powerful tool that allows you to combine the simplicity of Markdown with the expressiveness of JSX. This makes your content more interactive and engaging for readers.

Dynamic Content

One of the benefits of using MDX is that you can include dynamic content. For example:

This page was rendered on 8/27/2025.