DEV Community

Annie Zheng
Annie Zheng

Posted on

Advice Needed ➡️ Rails+React/Next.js: how to store code blocks so formatting persists?

tl;dr How should I approach storing code blocks in a react + rail application? If I were to store the code block data in the rails backend, which datatype should I store it as? And if on the frontend, would mdx files be the best solution?

I’m building a programming quiz application where a question has many answers and each answer (only one is correct) has an explanation. The question consists of the question itself and a code block, similar to what’s circled in orange in the following image: wireframe of the app that shows a sample question containing block of code

As I want to practice building Rails+React (Next.js) applications, I thought that the questions would be stored on the backend. However, is that a good idea? If so, I’m wondering about what would be a possible way to store the code snippets given the Rails datatypes?

Alternatively, I was also considering storing all the questions on the frontend. If I choose to do so, would mdx files be the best solution here?

So, to sum up, which of the following solutions would be best here:

  • Storing code block as markdown files in the frontend
  • Storing code block data in the backend
  • Different solution altogether?

Top comments (8)

Collapse
 
prosenjit98 profile image
prosenjit98

You can store it as sting in back-end data base.. and use "white-space: pre-wrap" html property show as it is.

Collapse
 
sylwiavargas profile image
Sylwia Vargas

Oh, interesting! Do you think that this would preserve the new lines as well?

And how would you go about making sure that ‘,’, and ” don’t mess up the db entry?

(Just curious what’s possible!)

Collapse
 
prosenjit98 profile image
prosenjit98

answer of first question, yes it will preserve everything.
and for second one my answer is also positive, believe me nothing will mess up just try it once.

Collapse
 
prosenjit98 profile image
prosenjit98

Just one correction use "Text" type instead of "String" type

Collapse
 
bigfishh profile image
Annie Zheng

oh, that's fascinating! I'll give it a try, thanks!

Collapse
 
val_baca profile image
Valentin Baca

I'd recommend just storing it as a string. It's just text. The text already includes newlines and whitespace.

How it's displayed should be independent of how it's stored.

Collapse
 
bigfishh profile image
Annie Zheng • Edited

ha! that sounds really straightforward, maybe I was overcomplicating it. thank you for your comment! it's really helpful.

Collapse
 
Sloan, the sloth mascot
Comment deleted