Exploring the power behind rich text

[github-learning-lab[bot]]

Exploring the power behind rich text

:sparkles: Branch: richtextmarkdown

Introduction

As we've seen, 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 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:

```json
  "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

Activity

1. In about-us.jsonc, change the text in tab-list.item#home1 so that an "About" appears in the first tab;

2. In the rich-text content linked to this tab, use the text below:

   # Our history \n ### We were born from an internal VTEX hackathon! \n That's right. VTEX's first Hackatheme (store theme hackathon) had 3 finalists. One of them was FlatFlat, the store that you're accessing now. FlatFlat was created by the engineers Afonso Praça and Sávio Muniz, together with designers Lucas Falcão and Augusto Barbosa, and new business director Maurício Baum. As the store was created by profissionals having the most diverse backgrounds, the result was an obvious one: they became the finalists with coolest layout among participants.

3. Insert the title and subtitle in bold.

Expected result:

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

---

:no_entry_sign: Are you lost?

Is there any problem with this step? What about sending us a feedback? :pray:

Submit feedback

---

If you're still unsure as to how to send your answers, click here.

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::x::white_check_mark::x:

Tests

:white_check_mark: Getting the file :x: Your tab-list.item#home1 block does not have the correct label text :white_check_mark: Update the text content of the rich-text block associated with tab-list.item#home1 :x: The text content of the rich-text block associated with tab-list.item#home1 does not match the expected format

Try again :grin:

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::x::white_check_mark::x:

Tests

:white_check_mark: Getting the file :x: Your tab-list.item#home1 block does not have the correct label text :white_check_mark: Update the text content of the rich-text block associated with tab-list.item#home1 :x: The text content of the rich-text block associated with tab-list.item#home1 does not match the expected format

Try again :grin:

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::x::white_check_mark::x:

Tests

:white_check_mark: Getting the file :x: Your tab-list.item#home1 block does not have the correct label text :white_check_mark: Update the text content of the rich-text block associated with tab-list.item#home1 :x: The text content of the rich-text block associated with tab-list.item#home1 does not match the expected format

Try again :grin:

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::x::white_check_mark::x:

Tests

:white_check_mark: Getting the file :x: Your tab-list.item#home1 block does not have the correct label text :white_check_mark: Update the text content of the rich-text block associated with tab-list.item#home1 :x: The text content of the rich-text block associated with tab-list.item#home1 does not match the expected format

Try again :grin:

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::x::white_check_mark::x:

Tests

:white_check_mark: Getting the file :x: Your tab-list.item#home1 block does not have the correct label text :white_check_mark: Update the text content of the rich-text block associated with tab-list.item#home1 :x: The text content of the rich-text block associated with tab-list.item#home1 does not match the expected format

Try again :grin:

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::x::white_check_mark::x:

Tests

:white_check_mark: Getting the file :x: Your tab-list.item#home1 block does not have the correct label text :white_check_mark: Update the text content of the rich-text block associated with tab-list.item#home1 :x: The text content of the rich-text block associated with tab-list.item#home1 does not match the expected format

Try again :grin:

[vtex-course-hub[bot]]

Oopsie, something went wrong :crying_cat_face:

Results

:white_check_mark::white_check_mark::white_check_mark::x:

Tests

:white_check_mark: Getting the file :white_check_mark: Update the label of tab-list.item#home1 :white_check_mark: Update the text content of the rich-text block associated with tab-list.item#home1 :x: The text content of the rich-text block associated with tab-list.item#home1 does not match the expected format

Try again :grin:

[vtex-course-hub[bot]]

You did great! :grin:

Results

:white_check_mark::white_check_mark::white_check_mark::white_check_mark:

Tests

:white_check_mark: Getting the file :white_check_mark: Update the label of tab-list.item#home1 :white_check_mark: Update the text content of the rich-text block associated with tab-list.item#home1 :white_check_mark: Make the title and subtitle and the markdown text bold

[github-learning-lab[bot]]

You have successfully completed this step!

Go to the next step!