Exploring the power behind rich text

Introduction

Markdown is a user friendly language that can be easily converted to HTML. In this lesson, we'll see how it's possible to use this language in our Rich Text block to customize them and create interesting texts.

Rich Text with Markdown

To include texts in the rich-text block, you need to use the text prop:

  "rich-text#home1": {
    "props": {
      "text": "My text",
      "textPosition": "LEFT",
      "textAlignment": "LEFT"
    }
  }

The text prop accepts markdown format. However, if you want to write your text using this language, your code must be similar to the following:

  "rich-text#home1": {
    "props": {
      "text": "# My title h1 \n Insert a paragraph here \n ## My title h2 \n Insert the second paragraph here \n Include a list here \n - Item 1 \n - Item 2 \n - Item3",
      "textPosition": "LEFT",
      "textAlignment": "LEFT"
    }
  }

Tip: Always use the \n command to skip lines when using markdown in the text prop.

Other properties of the rich-text component can be found in the Store Framework official documentation.

Changing the rich text style and content through Markdown

1. In about-us.jsonc, change the text in rich-text#about-content so that This is VTEX Minimum Theme become a small header (h3). Make sure that you break the line after it with \n;

2. Put VTEX Minimum Themein italic.

Expected result:

Note: Remember to access the Rich Text documentation if you have any questions during the activity.

Any questions?

See the answersheet for this step or check our [office hours] on the VTEX Developers channel(https://www.youtube.com/c/VTEXDevelopers)