Svelte의 문자열에서 Markdown 렌더링(mdsvex/SvelteKit)

내가 본 Svelte Markdown 자습서는 .md 파일에 액세스할 수 있거나 사전 처리된 파일에서 직접 Markdown을 작성한다고 가정합니다.

Markdown이 포함된 원시 문자열을 렌더링하려면 어떻게 해야 합니까? 사용 사례 예: .md 파일을 변경하지 않고도 CMS에서 Markdown 콘텐츠(예: Strapi )를 제공할 수 있는 유연성이 필요합니다.

이를 달성할 수 있는 몇 가지 방법이 있습니다. 이 솔루션에서는 mdsvex를 사용하여 Markdown을 HTML 형식으로 변환한 다음 해당 HTML을 렌더링합니다. mdsvex는 기본적으로 MDX의 래퍼인 Markdown 전처리기이며 Svelte와 호환됩니다.

설치

SvelteKit을 사용하지 않는 경우 다음과 같은 경우 MDsveX docs에서 대체 설치를 확인하십시오.

dev-dependency로 설치하여 시작하십시오.

npm i --save-dev mdsvex

또는...

yarn add --dev mdsvex

그런 다음 extensions 배열을 포함하도록 Svelte 구성을 업데이트합니다.

(우리는 .svelte 파일을 사용하지만 해당 파일 형식을 사용할 계획이라면 .svx와 같은 확장자를 포함할 수도 있습니다.)
svelte.config.js

export default {
  preprocess: [
    // your existing config
  ],

  extensions: ['.svelte'], // Add this

  kit: {
    // your existing config...
  }
};

이것이 지금 필요한 모든 구성입니다. ☑️

컴파일된 문자열을 구성 요소에 전달

API에서 데이터 가져오기를 시뮬레이션하는 경로 로더를 설정해 보겠습니다.
+page.server.ts

import type { Load } from '@sveltejs/kit';

const MOCK_RESPONSE_FROM_API = `
## Lorem

Lorem is currently extended with the following plugins.
Instructions on how to use them in your application are linked below.

| Plugin | README |
| ------ | ------ |
| Dropbox | [plugins/dropbox/README.md](Link) |
| Medium | [plugins/medium/README.md](Link) |
| Google Analytics | [plugins/googleanalytics/README.md](Link) |
`;

export const load: Load = async () => {
    const response = MOCK_RESPONSE_FROM_API; // Get data with eg. `fetch`

    return response;
};

다음으로 compile 에서 mdsvex 함수를 가져오고 (mock) response 를 전달하는 변수를 선언하고 반환하여 구성 요소에서 사용할 수 있습니다. 또한 compile에서 반환되는 내용을 확인하기 위해 기록합니다.
+page.server.ts

import { compile } from 'mdsvex';
// ...
const compiledResponse = await compile(response);

console.log('compiledResponse is: ', compiledResponse);

return compiledResponse;
// ...

콘솔 출력(서버 측에서 실행되는 경우 브라우저 콘솔이 아닌 터미널에서 볼 수 있음)



보시다시피 Markdown은 + 키 아래에 code 연산자와 함께 추가된 HTML 문자열 형식으로 컴파일되었습니다.

따라서 필요한 항목만 포함하도록 return 문을 업데이트할 수 있습니다.
+page.server.ts

export const load: Load = async () => {
    const res = MOCK_RESPONSE_FROM_API; // Get data with eg. `fetch`
    const compiledResponse = await compile(res);

    return { content: compiledResponse?.code };
};

HTML을 구성 요소에 직접 렌더링

이제 컴포넌트에서 data ~ export let 를 수신하고 렌더링하기만 하면 됩니다.

일반적으로 문자열은 일반 텍스트로 삽입되므로 < 및 >와 같은 문자는 특별한 의미가 없습니다. 이제 직접 렌더링하려는 HTML이 있으므로 HTML tags을 사용할 수 있습니다.

<p>{@html string}</p>

그래서 우리의 경우...
+page.svelte

<script lang="ts">
    export let data = {
        content: ''
    };
</script>

<div>{@html data.content}</div>

렌더링된 Markdown 🪄을 제공합니다.



문서의 참고 사항:

Svelte does not sanitise expressions before injecting HTML. If the data comes from an untrusted source, you must sanitise it, or you are exposing your users to an XSS vulnerability.

추가 사용자 정의
compile 메서드는 두 번째 매개 변수인 options를 허용합니다.

interface MdsvexOptions {
    extensions: string[];
    smartypants: boolean | smartypantsOptions;
    layout: string | { [name: string]: string };
    remarkPlugins: Array<plugin> | Array<[plugin, plugin_options]>;
    rehypePlugins: Array<plugin> | Array<[plugin, plugin_options]>;
    highlight: { highlighter: Function, alias: { [alias]: lang } };
    frontmatter: { parse: Function; marker: string };
}

즉, rehype 또는 remark 과 같은 도구를 사용하여 HTML을 변환할 수 있습니다. 사용 가능한 옵션here에 대해 자세히 알아볼 수 있습니다.

그게 다야! 👨‍💻

위 또는 기타 관련 정보에 대한 추가 정보가 필요한 경우 SvelteKit docs, MDX docs 또는 공식Svelte discord을 확인하십시오.