MDX Sample.

Overview

This site provides sample MDX usage. More samples will be added sequentially.

Below, MDX syntax examples are presented.

Headings

## Heading 2
 
### Heading 3
 
#### Heading 4
 
##### Heading 5
 
###### Heading 6

Heading 1 is not used.

For SEO and usability reasons, start with h2 for headings. Also, avoid using headings beyond h5 as much as possible.

Styling

**Bold**
 
_Italic_
 
**_Bold Italic_**
 
~~Strikethrough~~
 
`inline code`

Lists

Unordered List

- item 1
  - item 1-1
  - item 1-2
- item 2
    
    Text inside the item

Links

Internal Link

[Home](/)

External Link

[Google](https://google.com)

Link Card

A link card is a component that displays information about the linked destination. By simply writing the URL, a link card is automatically generated.

https://github.com/

GitHub · Change is constant. GitHub keeps you ahead.

Join the world's most widely adopted, AI-powered developer platform where millions of developers, businesses, and the largest open source community build software that advances humanity.

github.com

Images

![Dev placeholder Image](/dev-placeholder.png)

Tables

| Header 1 | Header 2 | Header 3 |
| :------- | :------: | -------: |
| 1-1      |   1-2    |      1-3 |
| 2-1      |   2-2    |      2-3 |

Code Blocks

Basic

You can write a code block by enclosing it with three backticks.

By specifying the language, syntax highlighting by Shiki will be applied.

If no language is specified, it will be displayed as plain text.

```
console.log("Hello World!!");
```

console.log('Hello World!!');

Title

```js title="sample.tsx"
console.log("Hello World!!");
```

console.log('Hello World!!');

Line Numbers

```js showLineNumbers
console.log("Hello World!!");
```

console.log('Hello World!!');

Highlight Lines

```js {1}
console.log("Hello World!!");
```

console.log('Hello World!!');

Highlight Words

```js /Hello/ /Apple/ /World/3-3
console.log('Hello, World!!');
console.log('Hello, Apple!!');
console.log('GoodNight, World!!');
```

console.log('Hello, World!!');
console.log('Hello, Apple!!');
console.log('GoodNight, World!!');

Diff

```plaintext
// js is written, but the comment is removed, so it is written in plaintext
console.log('Hello'); // [!code --]
console.log('World!!'); // [!code ++]
console.log('Diff!!');
```

console.log('Hello');
console.log('World!!');
console.log('Diff!!');

Multiple Attributes

Multiple attributes can be specified simultaneously.

```tsx title="hello.tsx" showLineNumbers {1-2}
export const Hello = ({ name }: { name: string }) => {
  return <div>Hello, {name}!</div>;
};
```

export const Hello = ({ name }: { name: string }) => {
  return <div>Hello, {name}!</div>;
};

Math

Can be written mathematic formulas.

To be added.

Inline Math

Block Math

Blockquotes

> Blockquote 1

Footnotes

Footnotes 1[^1]
 
[^1]: Footnotes text

Horizontal Line

---

Comment Out

{/* Comment Out */}

About Front Matter

Front matter is YAML-formatted metadata written at the beginning of an MDX file.

Specify information such as the title of the article and the date and time of posting.

Example

Describe the content in the following format, similar to the example enclosed by --- at the beginning of the file.

---
published: true
icon: '✍️'
title: 'MDX Sample'
description: 'This is a sample of MDX that can be used on this site.'
date: '2025-02-03T00:00:00+09:00'
lastupdated: '2025-02-15T23:50:00+09:00'
categories:
  - 'news'
tags:
  - 'mdx'
  - 'sample'
---

Available Properties

The following properties are available on this site.

Categories

The following categories are available.

• news : News
• events : Events
• activities : Activities

Callouts

Callouts are styles used to highlight specific text.

To be added.

Embedding

Embedding is a feature that allows you to display external content within an article. By simply writing the URL of a site that supports oEmbed, the embedding is automatically generated.

Currently, except for YouTube embeds, the content is loaded only after the user interacts with it. This is to prevent delays in the initial page load caused by external resource loading.

https://www.youtube.com/watch?v=cyFVtaLy-bA

YouTube

You can embed YouTube videos and playlists.

• https://www.youtube.com/watch?v=**

• https://www.youtube.com/playlist?list=**

Canva

You can embed Canva designs and slides.

• https://www.canva.com/design/**

Unsupported client – Canva

Unsupported client – Canva

www.canva.com

CodePen

You can embed CodePen pens.

• https://codepen.io/pen/

Spotify

You can embed Spotify playlists.

• https://open.spotify.com/playlist/

MDX / JSX

MDX is a format that allows embedding React Components and JSX inside Markdown.

This site provides the following custom components by default.

Tab Layout

A component that allows switching between multiple contents using tabs.

※ This may negatively impact UX.

{/* prettier-ignore */}
<TabLayout>
  <div title="TSX">
    ```tsx title="Counter.tsx" showLineNumbers
    'use client';
    // ...
    ```
  </div>
  <div title="Result">
  <Counter />
  </div>
  <div title="Image">
  ![Sample Image](/dev-placeholder.png)
  </div>
</TabLayout>

'use client';
 
import { useState } from 'react';
 
export const Counter = () => {
  const [count, setCount] = useState(0);
 
  return (
    <div>
      <p className="text-2xl font-bold">Counter</p>
      <div className="flex items-center gap-4">
        <button className="rounded-md bg-card p-2" onClick={() => setCount(count - 1)}>
          -
        </button>
        <span>{count}</span>
        <button className="rounded-md bg-card p-2" onClick={() => setCount(count + 1)}>
          +
        </button>
      </div>
    </div>
  );
};

Two-Column Layout

A component that provides a two-column layout.

{/* prettier-ignore */}
<TwoGridLayout>
  <div>
    ```plaintext
    Left
    ```
  </div>
  <div>
    ```plaintext
    Right
    ```
  </div>
</TwoGridLayout>

Left

Right

Adding Custom Components

You can add your own custom components.

Currently, due to the pre-processing of articles into JSON dynamically, components cannot be imported within MDX files using import.

Implementation Steps

1. Create a component file inside contents/components

2. Add the component to contents/components/index.tsx

   import { Counter } from './Counter';
    
   /**
    * Content components
    * An object that aggregates components used in Posts and Pages.
    */
   export const ContentComponents = {
     // Below add your components
     Counter,
   };

3. The component will now be available across posts and pages.