Remix의 렌더링 마크다운

Remix의 또 다른 멋진 기본 기능은 마크다운을 지원한다는 것입니다.

일반 마크다운 및 MDX 형식 모두.

이 기사에서는 리믹스 프로젝트에 대해 마크다운을 시작하는 것이 얼마나 쉬운지 보여줍니다.

Remix에서 일반 마크다운 파일 사용

Remix에서 일반 마크다운 파일로 시작하기 위해 프로젝트를 위한 새 디렉토리를 생성해 보겠습니다.
이 폴더의 이름은 blog 입니다. (지금은 게시물을 유지하고 싶기 때문에)

이 폴더 안에 my-first-article.md 파일을 만들고 그 안에 다음 콘텐츠를 넣습니다.

---
meta:
  title: "My first article"
  description: "Fully powered by Markdown"
---

# Hello World!

I'm amazing markdown content

## How cool!

이제 웹사이트를 실행하고 /blog/my-first-article 엔드포인트를 방문하기만 하면 됩니다!

완전히 렌더링된 마크다운으로 환영받을 것입니다!



왜 다 똑같아 보이는지 궁금하시죠?
소스 코드에는 모든 머리글 요소가 있지만 스타일을 추가하지 않았기 때문에 모든 항목이 표시되지 않습니다.

후속 기사에서 타이포그래피 플러그인 추가에 대해 자세히 알려 드리겠습니다.

Remix에서 MDX 렌더링

일반 마크다운 외에도 매우 멋지고 약간 더 역동적인 마크다운 버전과 같은 MDX를 선택할 수도 있습니다.

블로그 디렉토리에 mdx-sample.mdx 파일을 생성하여 시작하십시오.

---
componentData:
  name: Chris
---

import Name from "~/components/name";

# Hello MDX!

<Name {...attributes.componentData} />

보시다시피 상단 섹션에서 일부 구성 요소 데이터를 설정한 다음 구성 요소를 가져옵니다.

그런 다음 이 구성 요소는 이 구성 요소 데이터를 렌더링합니다.

이 초 기본 구성 요소를 빠르게 설정해 보겠습니다.components 폴더 안에 app 디렉토리를 만듭니다.
name.tsx 파일을 만들고 다음 구성 요소를 붙여넣습니다.

const Name = ({ name }: { name: string }) => <div>Hello {name}</div>;
export default Name;

hello {name} 를 나타내는 div를 렌더링하는 매우 간단한 구성 요소입니다.

마크다운 파일에서 이름을 받습니다.

이 파일을 열었을 때 어떻게 보이는지 봅시다.



GitHub에서 전체 코드 샘플을 찾을 수도 있습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나