Each line of content wrapped in a div

Question

I'm having trouble troubleshooting an issue on provemath where the content is not rendering as desired.

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

line1.
line2.

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

There are a few things that could be coming into play here...

1. I'm not sure how the browser takes in typed newlines.
2. My content rendering function (included below) runs Markdown (actually, marked) and some regexs.
3. CSS (included below) manipulates how some things are displayed, and I'm wondering if it can cause changes in the HTML itself. I previously thought the use of flexbox was causing this, but I changed the CSS to no avail.

Content rendering happens as follows:

Content is typed by user (hitting RETURN for a new line) and captured with jQuery's .html function

blind.value = $value.html()

to get the content, and then processed 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
}

The CSS is as follows:

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

you can see the old CSS commented out.

Answer 1

Why are you processing 'backslash' before '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, then using css grid to render them as you like. Here is a link documenting the css grid.