Highlight.js: Different styles on the same page

[starikovs]

Hello,

Is it possible to use different styles on the same page? I want to specify style the same way that the language is specified:

<pre><code class="html solarized_dark">...</code></pre>

Thanks!

[isagalaev]

Hi!

No, it won't work like that. We don't generate inline styling in the code blocks, instead we generate markup with pre-defined class names, like <span class="hljs-keyword">, and then rely on CSS to provide actual colors and styles for those.

It may be possible though to create a Web component for highlight.js that would use a scoped stylesheets for individual code blocks.

[starikovs]

Ok, thanks for the explanation.

BTW, it could be done like this, for example in highlight.js/src/styles/solarized_dark.css:

.hljs-comment,
.solarized-dark .hljs-comment /* to override default */ {
  color: #586e75;
}

[Sannis]

We have some plans to generate stylesheets in uniform way, but only after #348.

[starikovs]

Ok, that's cool :-)

[starikovs]

BTW, there's a way to prefix styles if you with help of LESS:

.atelier-seaside-light {
  @import (less) 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/atelier-seaside.light.min.css';
}

As a result you'll get:

.atelier-seaside-light .hljs-comment {
  color: #687d68;
}
.atelier-seaside-light .hljs-variable,
...
.atelier-seaside-light .css .hljs-pseudo {
  color: #e6193c;
}
...

That works perfectly! :)