Some highlightJS classes have a 0,2,0 specificity

Developers
,
#1

I noticed that the some hljs-tag, hljs-name, hljs-attr classes are getting a specificity of 0,2,0 even though there isn’t anything in the plugin’s stylesheet files that could lead to such a higher specificity. Unless I missed it, of course.

The problem is that this higher specificity is blocking the HTML/XML highlighter styles. In addition, even if one installs a different highlighter theme, those are not applied either. I’ve only tested it with HTML/XML.

I set up a default sample site here: https://test13.tiddlyhost.com

It’s using the xt256 highlightJS theme to make it clearly visible. If you look at browser’s F12 for those HTML elements and attributes, you’ll find that the default #444 color from the default stylesheet has a specificity of 0,2,0.

I tested it on:

  • Mozilla Firefox 132.0b6 (Gecko)
  • Naver Whale 3.5.4.2 (mobile) (Blink)

I haven’t fully tested it independently of TiddlyWiki, though when I checked Demo - highlight.js assuming the demo site is based on the same version as the TW plugin, it works fine there.

I also tried replacing the styles in the plugin with the default.css from highlightJS’s repo but nothing changed.

Is there anything I missed?

#2

Having a fast look, there seem to be 2 problems.

  1. Your CSS uses hljs-attribute instead of hljs-attr which seems to be used by the library.

But fixing that, does not solve the problem. Edit: hljs-attribute is fine. That’s not a problem

  1. The library CSS seems to have a bug here.

More invstigation is needed. – Please raise an issue at Github, so it will not be forgotten.

#3

The hljs default css seems to be OK. , So where did you get your xt256 theme from?

TW uses highlight.js v 11.4.0 atm. It may be possible, that the default theme is older than that.

#4

@youronlyone

Right now, I’d raise the specificity and move on:

image

image

The point is getting it to work with TiddlyWiki against the prevailing default. Upping the specificity would seem the shortest path to success.

You could try using @layer in the default sheet… not sure that’s wise though.

1 Like
#5

I’ve figured out the problem that the html tags’ styles can’t be changed. This is because the guide for theming highlightjs plugin is wrong.

First, import the css from the cdn:

Then, remove the tag $:/tags/Stylesheet from the tiddler $:/plugins/tiddlywiki/highlight/highlight.css.

The style of the html tags should use the ones in the css theme.