I am working on an application using Node.js, Express, React & Redux that enables users to write code into a text-editor, when the user hits 'run' to submit their code the code is then compiled using the JDoodle API.
As part of the JSON response returned from JDoodle I get the compiled output, so for instance:
System.out.println("Hello World!");
System.out.println("Hello Universe!");
would return:
Hello World!\nHello Universe!\n
The issue I am having is that I am rendering this output in an Iframe within a React component, and when I do so it is rendering the new line character \n as a single space. So for instance the above code would produce the following in the Iframe:
Hello World! Hello Universe!
I have tried giving the Iframe a className of iFrame and then in CSS doing the following:
.iFrame {
white-space: pre-wrap;
}
but no success! I also seen a few others mention escaping the backslash so replacing \n for \n:
.replaceAll('\n', '\\n')
but I cannot seem to get this working as every time I use the backslash character in quotes Javascript thinks I'm escaping the previous character.
I also tried
.split('\\')
but having the same issue as above.
Any help would be much appreciated, thank you!
EDIT: I had read Override body style for content in an iframe which this question was marked as a duplicate for but it does not address my issue in any way. I have now resolved my problem and if the question could be reopened I can hopefully post the solution which may in turn help others facing the same issue. Thank you!
