Text from Contentful came out as one single paragraph

Question

I am doing a website using Nuxt.js and Contentful to show a list of courses. I have created a content model for courses on Contentful. Each course has a description. When I retrieve the description on Nuxt.js, the text comes out in one single paragraph. I want to show some formatting, at least line breaks. The text, apparently, can show markdown tags, - Is there any package, functionality, etc. that I can use to convert those tags to HTML? Thanks.

I have made the description just text but I also tried using Rich Text with the same output, all text in one line.

Answer 1

I found the answer to this.

• Add @nuxtjs/markdownit ( https://www.npmjs.com/package/@nuxtjs/markdownit) as a dependency of the project like npm install @nuxtjs/markdownit --save

• Add it to modules on the nuxt.config.file and add this config for markdown

modules: [
  '@nuxtjs/markdownit'
],
markdownit: {
  injected: true
},

• Finally, on the page for the course.
  <div v-html="$md.render(course.fields.fulldescription)"></div>

Answer 2

If you use rich text react renderer with the Rich Text field, you can define custom rendering for your text nodes using the following line in options:

const options = {
 renderText: text => text.split('\n').flatMap((text, i) => [i > 0 && <br />, 
 text])
}

This will find and replace \n with
in your text nodes.