Consider using mark elements to contain highlighted lines #79
Description
When stylesheets fail to load or post content is sent out as part of an email, it would be nice to still display line highlights. It would also be nice to avoid having doubled-line breaks from appearing due to div adding additional line breaks due to being a block-level element in addition to the \n in the pre element.
Two ideas to address this:
- Use
spanelement instead ofdivforloc. - Use a
markelement instead ofspanwith ahighlightedclass.
So instead of:
<code class="hljs language-xml line-numbers selected-lines"><div class="loc"><span><span class="hljs-meta"><!doctype <span class="hljs-meta-keyword">html</span>></span></span></div>
<div class="loc"><span>%%include('../partials/copyright.html')</span></div>
<div class="loc highlighted"><span><span class="hljs-tag"><<span class="hljs-name">html</span> ⚡=<span class="hljs-string">""</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"es"</span> <span class="hljs-attr">data-first-attribute</span>=<span class="hljs-string">"something"</span> <span class="hljs-attr">data-second-attribute</span>=<span class="hljs-string">"something else"</span> <span class="hljs-attr">data-third-attribute</span>=<span class="hljs-string">"something yet more and more and more!"</span>></span></span></div>
<div class="loc"><span><span class="hljs-tag"><<span class="hljs-name">head</span>></span></span></div>
<div class="loc highlighted"><span> %%include('../partials/head.html', {</span></div>
<div class="loc highlighted"><span> "pageType": "index"</span></div>
<div class="loc highlighted"><span> })</span></div>
<div class="loc"><span><span class="hljs-tag"></<span class="hljs-name">head</span>></span></span></div>
<div class="loc"><span><span class="hljs-tag"><<span class="hljs-name">body</span>></span></span></div>
<div class="loc"><span> %%include('../partials/header.html', {</span></div>
<div class="loc"><span> "pageType": "index" </span></div>
<div class="loc"><span> })</span></div>
<div class="loc"><span> %%include('../partials/menu.html')</span></div>
</code>It could be generated as:
<code class="hljs language-xml line-numbers selected-lines"><div class="loc"><span><span class="hljs-meta"><!doctype <span class="hljs-meta-keyword">html</span>></span></span></div>
<span class="loc"><span>%%include('../partials/copyright.html')</span></span>
<mark class="loc"><span><span class="hljs-tag"><<span class="hljs-name">html</span> ⚡=<span class="hljs-string">""</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"es"</span> <span class="hljs-attr">data-first-attribute</span>=<span class="hljs-string">"something"</span> <span class="hljs-attr">data-second-attribute</span>=<span class="hljs-string">"something else"</span> <span class="hljs-attr">data-third-attribute</span>=<span class="hljs-string">"something yet more and more and more!"</span>></span></span></mark>
<span class="loc"><span><span class="hljs-tag"><<span class="hljs-name">head</span>></span></span></span>
<mark class="loc"><span> %%include('../partials/head.html', {</span></mark>
<mark class="loc"><span> "pageType": "index"</span></mark>
<mark class="loc"><span> })</span></mark>
<span class="loc"><span><span class="hljs-tag"></<span class="hljs-name">head</span>></span></span></span>
<span class="loc"><span><span class="hljs-tag"><<span class="hljs-name">body</span>></span></span></span>
<span class="loc"><span> %%include('../partials/header.html', {</span></span>
<span class="loc"><span> "pageType": "index" </span></span>
<span class="loc"><span> })</span></span>
<span class="loc"><span> %%include('../partials/menu.html')</span></span>
</code>When styles are loaded properly, it would look like:
Currently however when styles are removed the result is:
But with the changes proposed here if styles are removed entirely then the result would be:
This would involve this change (among others):
- $inline_css = ".hljs .loc.highlighted { background-color: $line_color; }";
+ $inline_css = ".hljs mark.loc { background-color: $line_color; color: inherit; }";The benefit here is added semantics as well!