메인 컨텐츠로 이동

마크다운 페이지

이것은 마크다운 페이지 기능을 설명하기 위해 마크다운으로 만든 페이지입니다.

다음과 같이 일반적인 MDX 기능을 모두 지원합니다.

info

유용한 정보

라이브 에디터
결과
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

절대 경로 사용하기#

Mdx, Md 파일 가져오기#

// *.md 파일import Chapter1 from './_chapter1.md';
<Chapter1 />;
// *.mdx 파일import Chapter2 from './_chapter2.mdx';
<Chapter2 />;

Chapter 1

Lorem ipsum chapter 1

Chapter 2

Lorem ipsum chapter 2

주석#

MDX 주석을 아래와 같이 사용할 수 있습니다.


내 주석
-->```
아무것도 표시되지 않습니다.
<!--
My comment
-->
## 소스 코드 파일에서 코드 블록 가져오기
import MyComponent from "@site/src/pages/examples/\_myComponent"
import BrowserWindow from '@site/src/components/BrowserWindow';
리액트 컴포넌트가 있다고 가정해봅시다.
컴포넌트를 가져와서 MDX에서 사용할 수 있습니다.
```jsx title="myMarkdownFile.mdx"import MyComponent from './myComponent';
<MyComponent />;

또한 Webpack raw-loader를 사용하면 MDX에서 소스 코드를 바로 가져와서 사용할 수도 있습니다.

myMarkdownFile.mdx
import CodeBlock from '@theme/CodeBlock';
import MyComponentSource from '!!raw-loader!./myComponent';
<CodeBlock className="language-jsx">{MyComponentSource}</CodeBlock>;
/** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */
import React from 'react';
export default function MyComponent() {  const [bool, setBool] = React.useState(false);  return (    <div>      <p>MyComponent rendered !</p>      <p>bool={bool ? 'true' : 'false'}</p>      <p>        <button onClick={() => setBool((b) => !b)}>toggle bool</button>      </p>    </div>  );}

테스트#

라이브 에디터
결과
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

코드 블록 테스트#

Title
function Clock(props) {  const [date, setDate] = useState(new Date());  useEffect(() => {    var timerID = setInterval(() => tick(), 1000);
    return function cleanup() {      clearInterval(timerID);    };  });
  function tick() {    setDate(new Date());  }
  return (    <div>      <h2>It is {date.toLocaleTimeString()}.</h2>      {/* prettier-ignore */}      long long long long long long long long long long long long line      {/* prettier-ignore */}    </div>  );}
라이브 에디터
결과
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
test
테스트
테스트

pre 태그 사용하기#

테스트
1 2 3

사용자 지정 heading id#

pre/code 요소 안에 자식 요소#

https://github.com/facebook/docusaurus/pull/1584 를 참고하세요.

Lol bro
Lol bro

수직선 기호#

Code 태그 + 두 개의 수직선 기호: ||

Code 태그 + 두 개의 수직선 기호: ||

이미지 가장자리(edge) 처리#