Gatsby - Is it possible to preserve newlines when parsing/displaying content from a YAML file?

user_17076163 0
Viewed 28

I currently have some data in a YAML file and I want to be able to preserve the line breaks when it gets converted into HTML using gatsby-remark-transformer. For example,

summary: > 
    I want this 

    to be displayed on two separate lines.

Is there a way to do this? Adding the newline character \n and using the block style | hasn't worked for me.

gatsby yaml javascript
1 Answers

Have you tried parsing the summary content and replacing the \n for <br/>?

const formattedSummary = summary.split(`\n\n`).map(text => `<p>${text.replace(/\n/g, `<br>`)}</p>`).join(``)

Another alternatives are discussed in this GitHub thread:

  • Using lines-to-paragraph package: 
    import paragraphs from "lines-to-paragraphs"

return <div dangerouslySetInnerHTML={{ __html: paragraphs(description) }} />
user_55853710
Related