Exploring the power behind rich text

This content was migrated from the VTEX Learning Center and is no longer being actively maintained. For the most accurate and up-to-date information, please check the official documentation.

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:


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

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:


_10  "rich-text#home1": {
_10    "props": {
_10      "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",
_10      "textPosition": "LEFT",
_10      "textAlignment": "LEFT"
_10    }
_10  }

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

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;
Put VTEX Minimum Themein italic.

Expected result:

{"base64":" ","img":{"width":1524,"height":619,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":759959,"url":"https://user-images.githubusercontent.com/19495917/90180384-410d4900-dd85-11ea-88b9-3af68e8f3a08.png"}}

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

Answer sheet

See answer sheet for about-us.jsonc

about-us.jsonc


_31// store/blocks/about-us.jsonc
_31{
_31  "store.custom#about-us": {
_31    "blocks": ["flex-layout.row#about-us"]
_31  },
_31  "flex-layout.row#about-us": {
_31    "children": ["image#about-us", "flex-layout.col#text-about-us"]
_31  },
_31  "flex-layout.col#text-about-us": {
_31    "children": ["rich-text#about-title", "rich-text#about-content"],
_31    "props": {
_31      "preventVerticalStretch": true
_31    }
_31  },
_31  "rich-text#about-title": {
_31    "props": {
_31      "text": "# About Minimum Theme"
_31    }
_31  },
_31  "rich-text#about-content": {
_31    "props": {
_31      "text": " ### This is the _VTEX Minimum Theme_ \n You can use it to test blocks usage and build your first store from scratch."
_31    }
_31  },
_31  "image#about-us": {
_31    "props": {
_31      "src": "https://appliancetheme.vteximg.com.br/arquivos/cozinha-about-us.png",
_31      "maxHeight": "600px"
_31    }
_31  }
_31}