# Markup language and CSS (/ink/markup)



The ***ink* + Pixi’VN integration** provides some additional features to facilitate the use of components that introduce a <DynamicLink href="/start/markup-markdown">Markup</DynamicLink> in the text.

## New Lines [#new-lines]

To create a new line, you can use the escape character `\\n`.

<Callout>
  In our case, since we use Markdown to display the line break, we will need two `\\n\\n`.
</Callout>

For example:

```ink title="ink"
=== start ===
Hello, this is a test. \\n\\n This is a new line.
```

<PixiVnExample path="ink/markup/new-lines" />

## Markdown [#markdown]

On Pixi’VN it is recommended to use Markdown to add style to your text. If you have <DynamicLink href="/start/markup-markdown">implemented Markdown in your project</DynamicLink&#x3E; then you will be able to use Markdown syntax to style your text in &#x2A;**ink***.

To do this you need to keep in mind that many symbols of Markdown syntax are also used by ***ink* syntax**, such as: `#`, `*`, `/`, `~`, `-`, `|` etc. To avoid conflicts you can use the escape character `\` before the Markdown symbol.

For example:

```ink title="ink"
Hello, this is some *italic* text and this is some **bold** text.
```

<PixiVnExample path="ink/markup/markdown" />

<Accordions>
  <Accordion title="Advanced case: escaping every Markdown symbol" id="advanced-markdown-escaping">
    <CodeBlockTabs defaultValue="On ink">
      <CodeBlockTabsList>
        <CodeBlockTabsTrigger value="On ink">
          On ink
        </CodeBlockTabsTrigger>

        <CodeBlockTabsTrigger value="On Markdown">
          On Markdown
        </CodeBlockTabsTrigger>
      </CodeBlockTabsList>

      <CodeBlockTab value="On ink">
        ```ink
        \# Markdown Test \\n<>
        Hello, this is a test of the markdown parser. Pixi’VN does not manage markdown, but you can implement a markdown parser to display text with markdown syntax. \\n<>
        For example in React, you can use the library [react-markdown](https:\/\/www.npmjs.com/package/react-markdown). \\n<>
        \#\# Bold Text \\n<>
        \**This is bold text.** \\n<>
        \#\# Italic Text \\n<>
        \*This is italic text.* \\n<>
        \#\# Delete Text \\n<>
        \~~This is deleted text.~~ \\n<>
        \#\# Link Test \\n<>
        [Link to Google](https:\/\/www.google.com) \\n<>
        \#\# H2 Test \\n<>
        \#\#\# H3 Test \\n<>
        \#\#\#\# H4 Test \\n<>
        \#\# Code Test \\n<>
        \`Hello World\` \\n<>
        \`\`\`js \\n<>
        console.log("Hello World") \\n<>
        \`\`\` \\n<>
        \#\# List Test \\n<>
        \- Item 1 \\n<>
        \* Item 2 \\n<>
        \- [x] Item 3 \\n<>
        \#\# Table Test \\n<>
        \| Header 1 \| Header 2 \| \\n<>
        \| -------- \| -------- \| \\n<>
        \| Cell 1   \| Cell 2   \| \\n<>
        \#\# Separator Test \\n<>
        \*\*\* \\n<>
        Footer
        ```
      </CodeBlockTab>

      <CodeBlockTab value="On Markdown">
        ```markdown
        # Markdown Test

        Hello, this is a test of the markdown parser. Pixi’VN does not manage markdown, but you can implement a markdown parser to display text with markdown syntax.

        For example in React, you can use the library [react-markdown](https://www.npmjs.com/package/react-markdown).

        ## Bold Text

        **This is bold text.**

        ## Italic Text

        _This is italic text._

        ## Delete Text

        ~~This is deleted text.~~

        ## Link Test

        [Link to Google](https://www.google.com)

        ## H2 Test

        ### H3 Test

        #### H4 Test

        ## Code Test

        \`Hello World\`

        \`\`\`js
        console.log("Hello World")
        \`\`\`

        ## List Test

        - Item 1

        * Item 2

        - [x] Item 3

        ## Table Test

        | Header 1 | Header 2 |
        | -------- | -------- |
        | Cell 1   | Cell 2   |

        ## Separator Test

        ---

        Footer
        ```
      </CodeBlockTab>
    </CodeBlockTabs>

    <PixiVnExample path="ink/markup/markdown-advanced" />
  </Accordion>
</Accordions>

## CSS [#css]

You can also use Tailwind CSS classes to format text using HTML.

For example:

```ink title="ink"
<span class="inline-block text-blue-500">some *blue* text</span>.
<span class="inline-block text-red-500">some *red* text</span>.
<span class="inline-block text-green-500">some *green* text</span>.
```

<PixiVnExample path="ink/markup/css" />