Pixi’VNMarkdown
Pixi’VN에서 Markdown 사용 및 통합에 대한 개요. React, Vue, Svelte, Angular 예제 포함.
Pixi’VN은 어떤 마크업에도 종속되지 않으며, 개발자가 원하는 마크업을 선택할 수 있는 자유를 제공합니다. 그러나 Markdown을 사용하는 것을 권장합니다.
템플릿
모든 템플릿에서 Markdown 컴포넌트는 이미 정의되어 있습니다.
ink
이 메서드는 ink 문법과 함께 사용할 수 있습니다. 자세한 내용은 여기를 참조하세요.
다음은 JavaScript 생태계에서 Markdown을 구현하는 몇 가지 예제입니다:
// I use the react-markdown library to convert the Markdown to HTML
// read more about it here: https://www.npmjs.com/package/react-markdown
import Markdown from "react-markdown";
import rehypeRaw from "rehype-raw";
import remarkGfm from "remark-gfm";
export default function MarkdownComponent({ text }: { text: string }) {
return (
<Markdown remarkPlugins={[remarkGfm]} rehypePlugins={[rehypeRaw]}>
{text}
</Markdown>
);
}React Markdown Typewriter
React Markdown Typewriter는 Markdown과 타이프라이터 효과를 결합한 라이브러리입니다. 이 라이브러리는 React 템플릿의 Markdown 컴포넌트에 타이프라이터 효과를 추가해야 하는 저의 필요에 의해 제가 직접 만들었습니다.
React를 사용하고 있다면 이 라이브러리를 사용하는 것을 권장합니다:
import { MarkdownTypewriter } from "react-markdown-typewriter";
import rehypeRaw from "rehype-raw";
import remarkGfm from "remark-gfm";
export default function MarkdownComponent({ text }: { text: string }) {
return (
<MarkdownTypewriter
remarkPlugins={[remarkGfm]}
rehypePlugins={[rehypeRaw]}
>
{text}
</MarkdownTypewriter>
);
}