Pixi’VNMarkdown
Overview of using Markdown and its integrations in Pixi’VN, with examples for React, Vue, Svelte, and Angular.
Pixi’VN is not tied to any markup, and gives the developer the ability to choose the markup they prefer. However, it is recommended to use Markdown.
Templates
In all templates, the Markdown component is already defined.
ink
You can use this method with the ink syntax. See more here.
Here are some examples of implementations of Markdown in the JavaScript ecosystem:
// 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 is a library that combines Markdown and Typewriter. This library was created by me for my need to add a Typewriter effect to the Markdown component in my React templates.
If you are using React, I recommend you use it:
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>
);
}