Markup language in ink
To add style to your text in ink you must be done through .css
files. This method is not possible to use in Pixi’VN.
For this reason ink + Pixi’VN integration provides the following methods to add style to your text:
New Lines
To create a new line, you can use the escape character \\n
.
ink
=== start ===
Hello, this is a test. \\n\\n<>
This is a new line.
Markdown on ink
On Pixi’VN it is recommended to use Markdown to add style to your text. If you have implemented Markdown in your project then you will be able to use Markdown syntax to style your text.
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.
Here's an example:
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<>
\#\# Colored Text \\n<>
<span style="color:blue">some *blue* text</span>. \\n<>
<span style="color:red">some *red* text</span>. \\n<>
<span style="color:green">some *green* text</span>. \\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