Use <br> to separate lines of code block

[openorclose]

What is the purpose of this pull request? (put "X" next to an item, remove the rest)

• [x] Bug fix

What is the rationale for this request?
Fixes #1173
Fixes #1125

What changes did you make? (Give an overview)

In #991 , to handle empty lines, an unprintable character was added to make the span take up space. This causes problems for code copying.

Instead of that, let's make the span be inline-block and use <br> to put them on new lines.

Provide some example code that this change will affect:

```
some code





new lines above
```

This should now display correctly, and not have any new line characters inside.

Is there anything you'd like reviewers to focus on?
Testing instructions:

Check that multiple lines work, and that copying them also works

Proposed commit message: (wrap lines at 72 characters)

Use <br> and inline-block to separate spans.

Adding extra unprintable characters cause code copying to fail.

Let's not use them, and manually separate
them by using <br> instead.

[ang-zeyu]

Different fix may be needed:

https://deploy-preview-1176--markbind-master.netlify.com/userguide/formattingcontents#line-highlighting

[openorclose]

Different fix may be needed:

https://deploy-preview-1176--markbind-master.netlify.com/userguide/formattingcontents#line-highlighting

Oh what browser is that?

I'm using firefox 73 and it looks ok:

[ang-zeyu]

Oh what browser is that?

chrome v80, seems to be broken on edge ( I'm on a pretty old version though ) as well

Looks fine on firefox for me as well 👍

[openorclose]

Oh what browser is that?

chrome v80, seems to be broken on edge ( I'm on a pretty old version though ) as well

Looks fine on firefox for me as well

Yeah, have to think of a different fix...

Changing empty lines to a single space probably wouldn't work also, since these extra spaces might affect how the program runs.

[alyip98]

@openorclose does this fix work?

I moved the line breaks inside the spans and made the <span> display:block

[openorclose]

Yeah seems to work. Thanks!

[alyip98]

Looks like LGTM to me on all 3 major browsers!

[yamgent]

OK. Just a non-blocking question, can't remember whether this was asked: why did we use <span> instead of <div>?

[openorclose]

OK. Just a non-blocking question, can't remember whether this was asked: why did we use <span> instead of <div>?

I chose it rather arbitrarily, but if i were to give a reason it would be that <span> can only contain inline elements which seems more appropriate for showing a line of code.

[jamessspanggg]

@openorclose code copying for safari: