container styling: place the hljs class on the pre-tag instead?

[geyang]

Currently Highlight js handles the <pre><code> tag by treating the <code> tag as the root container by default.

As a result, this means that the .hljs class is assigned to the code tag instead of the pre tag.

Typically in a markdown renderer, the pre tag has padding because pre-formate blocks usually require so.

Because there is no way in CSS to remove the padding of the containing pre-tag, the pre code container have to share the css padding with the other pre-formate blocks.

Because hljs treats the inner code block as the root container, and applies the .hljs class to this node by default, there is a mismatch between the background-color of the pre-node and the code-node that is inside.

Also there is now the pre node padding plus the code.hljs node padding.

Would there be a better way to handle this?

I have been using highlights for years, and this problem comes up quite frequently. I'm hoping that we can figure out a standard way so that people don't have to have the same CSS boiler plate everytime.

Update and Note to self:

Standard common mark implementation applies the .hljs class to the <pre> block. Here is an example from markdown-it.

<pre class="hljs language-js"><code><span class="hljs-keyword">var</span> foo = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">bar</span>) </span>{
  <span class="hljs-keyword">return</span> bar++;
};

<span class="hljs-built_in">console</span>.log(foo(<span class="hljs-number">5</span>));
</code></pre>

On the other hand, GitHub does it very differently:

<div class="highlight highlight-text-html-basic"><pre>&lt;<span class="pl-ent">pre</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>hljs language-js<span class="pl-pds">"</span></span>&gt;&lt;<span class="pl-ent">code</span>&gt;&lt;<span class="pl-ent">span</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>hljs-keyword<span class="pl-pds">"</span></span>&gt;var&lt;/<span class="pl-ent">span</span>&gt; foo = &lt;<span class="pl-ent">span</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>hljs-function<span class="pl-pds">"</span></span>&gt;&lt;<span class="pl-ent">span</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>hljs-keyword<span class="pl-pds">"</span></span>&gt;function&lt;/<span class="pl-ent">span</span>&gt; (&lt;<span class="pl-ent">span</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>hljs-params<span class="pl-pds">"</span></span>&gt;bar&lt;/<span class="pl-ent">span</span>&gt;) &lt;/<span class="pl-ent">span</span>&gt;{
  &lt;<span class="pl-ent">span</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>hljs-keyword<span class="pl-pds">"</span></span>&gt;return&lt;/<span class="pl-ent">span</span>&gt; bar++;
};

&lt;<span class="pl-ent">span</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>hljs-built_in<span class="pl-pds">"</span></span>&gt;console&lt;/<span class="pl-ent">span</span>&gt;.log(foo(&lt;<span class="pl-ent">span</span> <span class="pl-e">class</span>=<span class="pl-s"><span class="pl-pds">"</span>hljs-number<span class="pl-pds">"</span></span>&gt;5&lt;/<span class="pl-ent">span</span>&gt;));
&lt;/<span class="pl-ent">code</span>&gt;&lt;/<span class="pl-ent">pre</span>&gt;</pre></div>

Looks like GitHub is using a different html representation from the rest of the common-mark standard.

But it seems I was suggesting in the original issue that the default behavior of highlight.js is to apply these classes to the code element.

This is likely a result of how highlight js finds elements to highlight.

A questions remain:

1. suppose I apply styling to <pre> block instead, is .hljs {padding: non-zero} going to cause any issue? probably not because now the padding overrides the default pre padding

Seems this is best fixed by using own html generator.

[geyang]

Hi, is there any update on this? If my comment is unclear I can futher clarify.

[isagalaev]

Hi! Sorry, I'm lagging behind on answering bug mail.

There's a few ways to solve this, I think.

• First of all, you can certainly set 0 padding on pre. I'm not sure what do you mean by saying it can't be done in CSS.
• Alternatively, if you want all pre containers to have a certain padding and you don't want an extra padding added by code you can set it to 0 just as well: .hljs {padding: 0}.
• You could also initialize highlighting on pre nodes, instead of their code children. This will require some JavaScript to walk over all pres, figure out if they contain code and then call hljs.highlightBlock() on parents.

[SH20RAJ]

Dev.to and GitHub usage pl Syntax Highlighter :- https://dev.to/sh20raj/devto-and-github-usage-pl-syntax-highlighter-3mo8