Default rendering with newlines and ins/del/mark

[zachleat]

After #5 and #7 were merged, I’m now thinking about the best way to style the line highlighter to make it render how it used to with full width background colors.

Previous behavior on eleventy-base-blog:

New behavior:

This is what it renders like without CSS (this is showing default styles for ins/del/mark, which are okay). I’ve added a few newlines in there just to see how #5 would look too (those were not in the previous behavior screenshot):

This is what it looks like on eleventy-base-blog after removing the ins/del/mark styles:

The display: block Problem:

When using .highlight-line { display: block; } to get full width highlights, the problem exhibits itself:

If I move the <br> inside of the highlight-line elements, I get what I want with display: block;

Would it be better to move the <br>? Or to use CSS to hide the <br> altogether when using display: block;

[zachleat]

cc @mathiasbynens

[zachleat]

You can see what I mean in https://github.com/11ty/eleventy-plugin-syntaxhighlight/compare/inner-br?expand=1

[mathiasbynens]

Hmm… E.g. <mark>foo bar<br></mark> is weird to me, since the line break isn’t really part of what you’re trying to highlight.

IMHO CSS is the right layer to solve this. It’s a styling issue. The current HTML is correct.

[zachleat]

Alright yeah, that makes sense to me. The line highlighting CSS (which is what needs display: block anyway) can package all this stuff together.