Preserving <pre> tag whitespace when displaying content from Firebase with dangerouslySetInnerHtml

Question

Here's the background: I want to be able to save rich text blog posts to Firebase to then display them, including code snippets, on a Posts page.

Right now, I'm simply saving a single string of html to Firebase, retrieving that per post, and setting it with dangerouslySetInnerHtml. I'm the only one adding posts.

However, this means that I lose tabbing information when displaying code snippets in blocks. I don't think I can use solution since I'm using dangerouslySetInnerHtml: Formatting code with <pre> tag in React and JSX

Any tips on how to store, retrieve, and display rich text using React and Firebase? Thank you for your help.

Answer 1

I was able to use the following to convert rich text to html, and then minify it:

• https://4html.net/Online-HTML-Editor-Text-to-HTML-Converter-870.html

• http://minifycode.com/html-minifier/