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>
);
}