Each line of content enclosed in a div

Question

I am having trouble with provemath troubleshooting where content is not displayed as desired.

The problem is that each line (except the first) is wrapped in a <div> in writing. For example, the contents

 line1. line2. 

as you can see through the Safari web inspector, it actually displays as <p>line1.<div>line2.</div></p> . The DESIRED output is <p>line1.<br>line2.</p> .

There are a few things that can come into play here ...

• I'm not sure how the browser accepts the entered newline characters.
• My content rendering function (see below) runs Markdown (actually, marked ) and some regular expressions.
• CSS (see below) controls how certain things are displayed, and I wonder if they can cause changes to the HTML itself. Earlier, I thought using flexbox caused this, but I changed CSS to no avail.

Rendering content is as follows:

The content is entered by the user (pressing RETURN for a new line) and executed using the jQuery .html function

 blind.value = $value.html() 

to get the contents and then process with

 function render_content(string) { // make all \ into \\ instead, so that they will be \ again when marked is done. This is for MathJax postrender compatability. string = string.replace(/\\/g, '\\\\') string = string.replace(/\n/g, '<br />') // not doing anything AFAIK string = marked(string) string = string.replace(/img(\d+)/g, '<img src="image/$1.jpg" />') string = string.replace(/\\includegraphics\{(.*?)\}/g, '<img src="image/$1.jpg" />') return string } 

CSS is as follows:

  .value { // display: inline-flex; display: inline; // flex-direction: column; vertical-align: top; width: 85%; } 

you can see the old CSS comment.

Answer 1

Why do you handle a backslash before a newline? Have you tried this?

 string = string.replace(/\n/g, '<br />') string = string.replace(/\\/g, '\\\\') string = marked(string) 

Answer 2

try wrapping both lines in a div and then using the css grid to display them as you like. Here is the link documenting the css grid.

Answer 3

To get the answer, the solution was to use a regular expression to remove the <div> and </div> entries that some browsers add.

Since the user input is escaped, it cannot be confused with the user typing manually, since the user input THAT will result in an escaped HTML string (and will not generate a div, but simply text that says "").