MDX 샘플

개요

본 사이트에서 사용 가능한 MDX 샘플입니다. 순차적으로 추가해 나갈 예정입니다.

다음은 MDX 표기법입니다.

제목


## 제목 2
 
### 제목 3
 
#### 제목 4
 
##### 제목 5
 
###### 제목 6

제목 2

제목 3

제목 4

제목 5

제목 6

제목1은 사용하지 않습니다.

SEO 및 사용성 측면에서 제목은 h2부터 시작해야 합니다. 또한, 제목 5 이상은 가급적 사용하지 않는 것이 좋습니다.

스타일링


**굵게**
 
_이탤릭체_
 
**_굵게 이탤릭체_**
 
~~취소선~~
 
`인라인 코드`

굵게

이탤릭체

굵게 이탤릭체

~~취소선~~

인라인 코드

순서 없는 목록


- 항목 1
  - 항목 1-1
  - 항목 1-2
- 항목 2
    
    항목 내의 텍스트

항목 1
- 항목 1-1
- 항목 1-2
항목 2

항목 내의 텍스트

링크

내부 링크


[홈](/)

홈

외부 링크


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

Google

이미지


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

링크 카드

링크 카드는 링크 대상 정보를 표시하는 구성 요소입니다. URL만 작성하면 링크 카드가 자동으로 생성됩니다.


https://github.com/

GitHub · Build and ship software on a single, collaborative platform

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

표


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

Header 1	Header 2	Header 3
1-1	1-2	1-3
2-1	2-2	2-3

코드 블록

기본

백쿼트 3개로 묶어 코드 블록을 작성할 수 있습니다.

지원 언어를 지정하면 Shiki에 의한 구문 강조가 적용된다.

언어를 지정하지 않으면 일반 텍스트로 표시됩니다.


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


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

제목


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

sample.tsx


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

줄 번호


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


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

줄 강조


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


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

단어 강조


```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!!');

차이점 표시


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


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

여러 언어 지정

여러 속성을 동시에 지정할 수 있습니다.


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

hello.tsx


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

수식

수식을 작성할 수 있습니다.

추가 예정

인라인

수식 블록

인용


> 인용문 1

인용문 1

각주


각주[^1]
 
[^1]: 각주의 내용

각주¹

수평선

---

코멘트아웃


{/* 코멘트아웃 */}

프론트 매터에 대하여

Front Matter는 MDX 파일의 맨 앞에 작성되는 YAML 형식의 메타데이터입니다.

글의 제목, 게시 날짜 등의 정보를 지정합니다.

예시

파일 앞머리에 ---로 둘러싸인 예시와 같은 형식으로 작성합니다.


---
published: true
icon: '✍️'
title: 'MDX 샘플'
description: '본 사이트에서 사용 가능한 MDX 샘플입니다.'
date: '2025-02-03T00:00:00+09:00'
lastupdated: '2025-02-15T23:50:00+09:00'
categories:
  - 'news'
tags:
  - 'mdx'
  - '샘플'
---

사용 가능한 프로퍼티

아래는 이 사이트에서 이용할 수 있는 속성입니다.

속성입	필수	값	설명
`published`	true	`true` or `false`	글 공개 여부를 지정합니다. 공개하지 않을 경우 글쓰기 모드
`icon`		Unicode Emoji 예시: `&#x1F389` -> 🎉	기사 아이콘 지정
`title`	true	`string`	기사 제목명 지정
`date`	true	`YYYY-MM-DDTHH:mm:ss+09:00`	기사 공개 날짜 및 시간 지정
`lastupdated`		`YYYY-MM-DDTHH:mm:ss+09:00`	기사 업데이트 날짜 지정
`categories`	true	카테고리 리스트	글의 카테고리 지정 사용 가능한 카테고리 확인
`tags`	true	태그 목록	기사 태그 지정

콜아웃

콜아웃은 특정 문장을 돋보이게 하기 위한 스타일입니다.

추가 예정

임베딩

임베딩은 외부 콘텐츠를 기사 내에 표시하기 위한 기능입니다. oEmbed 를 지원하는 사이트의 URL을 간단히 작성하면 자동으로 임베딩이 생성됩니다.

현재는 YouTube 임베딩을 제외하고는 사용자 입력에 따라 로딩이 시작됩니다. 이는 외부 리소스 로딩으로 인한 초기 표시 지연을 방지하기 위함입니다.


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

YouTube

YouTube의 동영상과 재생목록을 임베드할 수 있습니다.

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

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

Canva

Canva의 디자인 및 슬라이드를 임베드할 수 있습니다.

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

[include.R] ruBridge - 最終発表

https://www.canva.com

CodePen

CodePen의 펜을 임베드할 수 있습니다.

https://codepen.io/pen/

A Simple CodePen Example (feat. HTML, CSS, & JavaScript)

https://codepen.io

Spotify

Spotify의 재생목록을 임베드할 수 있습니다.

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

Top 50 - Japan

https://spotify.com

MDX / JSX

MDX는 Markdown 안에 React Component나 JSX를 삽입할 수 있는 표기법입니다.

본 사이트에서는 아래와 같은 커스텀 컴포넌트를 미리 제공하고 있다.

탭 레이아웃

여러 콘텐츠를 탭 전환을 통해 제공하는 컴포넌트입니다.

※ 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>

Counter.tsx


'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>
  );
};

두 개의 열 레이아웃

두 개의 열 레이아웃을 제공하는 컴포넌트입니다.


{/* prettier-ignore */}
<TwoGridLayout>
  <div>
    ```plaintext
    왼쪽
    ```
  </div>
  <div>
    ```plaintext
    오른쪽
    ```
  </div>
</TwoGridLayout>


왼쪽


오른쪽

커스텀 컴포넌트 추가

자신만의 컴포넌트를 추가할 수 있습니다.

현재, 사전에 동적으로 기사를 JSON 으로 변환하는 관계로 MDX 파일 내에서 import 로 컴포넌트를 불러올 수 없습니다.

구현 절차

contents/components 내에 컴포넌트 파일 만들기

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,
};

posts, pages 전체에서 사용할 수 있게 됩니다.

Footnotes

각주의 내용 ↩