# Markdown (/start/markup-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 they prefer. However, it is recommended to use Markdown.

<Callout title="Templates" type="info">
  In all templates, the Markdown component is already defined.
</Callout>

<Callout title="ink" type="info">
  You can use this method with the *ink* syntax. See more <DynamicLink href="/ink/markup#markdown">here</DynamicLink>.
</Callout>

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

<CodeBlockTabs defaultValue="React">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="React">
      React
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Vue">
      Vue
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Svelte">
      Svelte
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="Angular">
      Angular
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="React">
    ```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>
        )
    };

    ```
  </CodeBlockTab>

  <CodeBlockTab value="Vue">
    ```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('---
    title: header')
    ---

        return {
          src
        }
      }
    })
    </script>
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Svelte">
    ```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 = `
      ---
    title: 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} />
    ```
  </CodeBlockTab>

  <CodeBlockTab value="Angular">
    ```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;
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<Sandbox template="4h8wst" entry="/src/components/MarkdownComponent.tsx" previewHeight="300" />

React Markdown Typewriter [#react-markdown-typewriter]

[React Markdown Typewriter](https://www.npmjs.com/package/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:

```tsx title="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>
    )
};

```

<Sandbox template="rgjf6t" entry="/src/components/MarkdownComponent.tsx" previewHeight="320" />