Pixi’VN 2D game engine

Appearance

icon Markdown ​

Markdown is a lightweight markup language for creating formatted text using a plain-text editor. John Gruber created Markdown in 2004, in collaboration with Aaron Swartz, as a markup language that is intended to be easy to read in its source code form. Markdown is widely used for blogging and instant messaging, and also used elsewhere in online forums, collaborative software, documentation pages, and readme files.

Pixi’VN is not tied to any Markup, and gives the developer the ability to choose the Markup he prefers. However, it is recommended to use Markdown.

Here are some examples of implementations of Markdown in the JavaScript ecosystem:

tsx
// 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>
    )
};
vue
<!-- I use the vue-markdown-render library to convert the Markdown to HTML -->
<!-- read more about it here: https://www.npmjs.com/package/vue-markdown-render -->
<template>
  <div>
    <vue-markdown :source="src" />
  </div>
</template>

<script lang="ts">
import VueMarkdown from 'vue-markdown-render'

export default defineComponent({
  name: 'MyComponent',
  components: {
    VueMarkdown
  },
  setup(props, ctx) {
    const src = ref('# header')

    return {
      src
    }
  }
})
</script>
svelte
<!-- I use the svelte-markdown library to convert the Markdown to HTML -->
<!-- read more about it here: https://www.npmjs.com/package/svelte-markdown -->
<script>
  import SvelteMarkdown from 'svelte-markdown'
  const source = `
  # This is a header

This is a paragraph.

* This is a list
* With two items
  1. And a sublist
  2. That is ordered
    * With another
    * Sublist inside

| And this is | A table |
|-------------|---------|
| With two    | columns |`
</script>

<SvelteMarkdown {source} />
tsx
// I use the ngx-markdown library to convert the Markdown to HTML
// read more about it here: https://www.npmjs.com/package/ngx-markdown
import { Component, Input } from "@angular/core";
import { MarkdownModule } from "ngx-markdown";

@Component({
  selector: "app-markdown",
  template: `
    <markdown [data]="text"></markdown>
  `,
})
export class MarkdownComponent {
  @Input() text: string;
}

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 for my React templates.

If you are using react I recommend you to use it:

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