How to write publications using MDX

Aug 11, 2024

This is a custom MDX reference for writing my blog posts here, making it easy to include JSX components such as interactive embeds, charts, or alerts directly in the markdown content.

Here are some examples of using MDX:

h2 Heading

h3 Heading

h4 Heading

h5 Heading

Emphasis

This is bold text

This is italic text

Strikethrough

Blockquotes

If today were the last day of my life, would I want to do what I am about to do today? – Steve Jobs

CodeBlocks

// This is commented-out code
export default function HelloWorld() {
  return (
    <h1>Hello, World!</h1>
  );
}

Images

This website uses Next.js Image in MDX for seamless image rendering:

<Image
  src="/opengraph-image.png"
  alt="OpenGraph image"
  width={640}
  height={500}
/>

Renders:

OpenGraph image

Image Grid

This website uses a custom image grid component to display image galleries.

<ImageGrid
  columns={3} // Accepts 2, 3, or 4 columns
  images={[
    { src: "/photos/photo1.jpg", alt: "Photo1", href: "#" }, // 'href' is optional
    { src: "/photos/photo2.jpg", alt: "Photo2", href: "#" },
    { src: "/photos/photo3.jpg", alt: "Photo3"},
  ]}
/>

Renders:

Photo1
Photo2
Photo3

Embeds

Tweets

This website uses react-tweet to embed tweets in MDX posts.

<StaticTweet id="1617979122625712128" />

Renders:

YouTube Videos

This website uses react-youtube to embed YouTube videos in MDX posts.

<YouTube videoId="wXhTHyIgQ_U" />

Renders:

Captions

This website uses react-wrap-balancer to evenly balance captions in MDX posts.

<Caption>
  Captions that flow smoothly, making the content easy to read and visually
  appealing with a clean look.
</Caption>

Renders:

Captions that flow smoothly, making the content easy to read and visually appealing with a clean look.

Tables

This website uses a custom table component to render tables in MDX posts.

<Table
  data={{
    headers: ["Title", "Description"],
    rows: [
      [
        "First item",
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid perspiciatis repellat amet quos.",
      ],
      [
        "Second item",
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid perspiciatis repellat amet quos.",
      ],
    ],
  }}
/>

Renders:

TitleDescription
First itemLorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid perspiciatis repellat amet quos.
Second itemLorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid perspiciatis repellat amet quos.

Math Expressions

This website allows you to render mathematical expressions in MDX posts using KaTeX . Simply wrap the expression in $ to include KaTeX within the MDX content.

$
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$

Renders:

∫0∞e−x2dx=π2\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}

Callout

This website uses a custom callout component to render important information in MDX posts.

<Callout emoji="💡">
[Nextfolio](https://nextfolio.site) is a clean, simple, and fast portfolio built with Next.js, Tailwind CSS, and pnpm for optimal performance.
</Callout>

Renders:

💡

Nextfolio is a clean, simple, and fast portfolio built with Next.js, Tailwind CSS, and pnpm for optimal performance.

Junwatu