15줄 미만의 코드로 Markdoc 플러그인 생성

몇 주 전에 Markdoc 을 구동하는 저작 도구인 Stripe docs 을 오픈 소스로 공개했습니다. 출시와 함께 @markdoc/next.js plugin 을 사용하여 Markdoc을 Next.js와 함께 사용하는 방법을 보여주는 게시물을 게시했습니다.
이 블로그 게시물에서는 Parcel에 대해 작성한 플러그인을 예제로 사용하여 Markdoc을 사용할 수 있도록 자신만의 플러그인을 생성하는 방법을 보여드리겠습니다.

시작하기 전에 Parcel은 개발 서버, 핫 리로딩, 자동 생산 최적화 등을 포함하는 제로 구성 빌드 도구입니다. 그러나 기본적으로 Markdown 파일을 구문 분석하지 않으므로 Parcel과 함께 Markdoc을 사용하려면 특정 플러그인이 필요합니다. Markdoc은 Markdown의 확장이므로 표준 Markdown 플러그인으로는 파일을 제대로 구문 분석하기에 충분하지 않습니다.

전체 플러그인으로 바로 건너뛰려면 repo을 확인하십시오.

플러그인 만들기

플러그인을 빌드하려는 프레임워크 또는 도구에 따라 플러그인 시스템을 약간 다르게 처리할 수 있지만 플러그인에 포함된 코드는 비교적 유사해야 합니다. 핵심적으로 수행해야 할 작업은 Markdoc.parse() 및 Markdoc.transform() 메서드를 호출하는 것입니다.

Parcel에서는 자산을 변환하는 플러그인을 Transformer라고 합니다.

이 트랜스포머의 모습은 다음과 같습니다.

import { Transformer } from "@parcel/plugin";
import Markdoc from "@markdoc/markdoc";

export default new Transformer({
 async transform({ asset }) {
   const code = await asset.getCode();

   const ast = Markdoc.parse(code);
   const content = Markdoc.transform(ast);

   asset.type = "js";
   asset.setCode(`export default ${JSON.stringify(content)}`);

   return [asset];
 },
});

시작하려면 Parcel에서 Transformer를 가져오고 @markdoc/markdoc에서 Markdoc을 가져와야 합니다.

그런 다음 Parcel 변환기의 파일 내용에 액세스하는 방법은 asset.getCode()를 호출하는 것입니다. 거기에서 원시 Markdown 콘텐츠를 처리하려면 Markdoc에서 .parse() 및 .transform() 메서드를 호출해야 합니다.

마지막으로 변환된 콘텐츠를 반환해야 합니다. Markdoc.transform()는 JSON 개체를 반환하므로 .type 속성을 'js'로 변경하여 콘텐츠 유형이 이제 JavaScript임을 지정해야 합니다. 그런 다음 setCode 메서드를 호출하여 콘텐츠를 새로 생성된 콘텐츠로 바꾸고 export default 뒤에 추가해야 합니다. 이 마지막 부분은 Parcel에만 적용되지만 다른 도구용 플러그인을 만들려면 parse 및 transform를 호출해야 합니다.

플러그인 사용

이 플러그인을 사용하려면 애플리케이션의 .parcelrc 파일에 다음 줄을 붙여넣기 시작해야 합니다.

{
 "extends": "@parcel/config-default",
 "transformers": {
   "*.md": [
     "parcel-transformer-markdoc"
   ]
 }
}

이 코드는 Parcel의 기본 구성을 확장하여 *.md로 끝나는 파일을 처리하고 이러한 파일의 내용에 사용자 지정 변환기를 적용합니다.

그런 다음 getting-started.md라는 Markdown 파일이 있는 React 앱을 상상한다면 이 콘텐츠를 표시하는 데 필요한 코드는 다음과 같을 것입니다.

import content from "./getting-started.md";
import Markdoc from "@markdoc/markdoc";
import React from "react";

export function App() {
 const html = Markdoc.renderers.react(content, React);
 return (
   <main>
     {html}
   </main>
 );
}

그게 다야! 이제 Markdown 파일이 제대로 구문 분석되며 Markdoc이 제공하는 모든 기능을 사용할 수 있습니다.

기타 플러그인

개발자 커뮤니티의 다른 구성원도 자체 플러그인을 만들기 시작했습니다. 자유롭게 확인해보세요:

Svelte-markdoc

Esbuild-markdoc-plugin

Solidjs-markdoc

Vue-markdoc

자신만의 플러그인을 만들게 된다면 저희에게 알려주세요!

📣 트위터 팔로우
📺 구독하기
💬공식가입Discord server
📧 가입하기 Dev Digest

저자 소개

Stripe, a creative technologist 및 Google Developer Expert의 Developer Advocate입니다. 그녀는 기술 연구와 실험을 좋아합니다. 그녀는 코딩을 하지 않을 때 야외에서 시간을 보내고 새로운 맥주를 마시며 독서를 즐깁니다.