Pixi’VNMarkdown
Vue d'ensemble de l'utilisation de Markdown et de ses intégrations dans Pixi’VN, avec des exemples pour React, Vue, Svelte et Angular.
Pixi’VN n'est lié à aucun balisage et donne au développeur la possibilité de choisir le balisage qu'il préfère. Cependant, il est recommandé d'utiliser Markdown.
Modèles
Dans tous les modèles, le composant Markdown est déjà défini.
ink
Vous pouvez utiliser cette méthode avec la syntaxe ink. Voir plus ici.
Voici quelques exemples d'implémentations de Markdown dans l'écosystème JavaScript :
// 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 est une bibliothèque qui combine Markdown et l'effet machine à écrire. Cette bibliothèque a été créée par moi pour répondre à mon besoin d'ajouter un effet machine à écrire au composant Markdown dans mes modèles React.
Si vous utilisez React, je vous recommande de l'utiliser :
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>
);
}