highlight.js: Problem with background-blend-mode in CSS
For some reason -blend-mode is out of hljs-attribute scope:
background-image: url(images/sample.png);
background-color: red;
background-blend-mode: multiply;
<span class="hljs-attribute">background</span>-blend-mode<span class="hljs-value">: multiply;</span>
About this issue
- Original URL
- State: closed
- Created 10 years ago
- Comments: 17 (11 by maintainers)
Commits related to this issue
- Added background-blend-mode into SCSS. This is something uncovered in #544 but it is in no way a correct fix as there are probably much more of new known CSS "keywords" missing from scss.js. But it s... — committed to highlightjs/highlight.js by isagalaev 9 years ago
- Disallow RULE at the top level in CSS This was done as part of #544 to highlight CSS rules not enclosed in curly brackets. This however broke highlighting of pseudo selectors. I couldn't yet figure o... — committed to highlightjs/highlight.js by isagalaev 9 years ago
Yes, we could just add
background-blend-modeto fix this particular case. I’ll gladly merge the pull request for that, as it won’t break anything.This doesn’t really solve the problem though: new properties appear constantly and nobody wants to maintain it. And if you add SVG and potentially every XML application that could be styled this simply looks unfeasible.
What we could do is similar to what @tonyganch is describing: we could define “css-properties” as a separate language and use it inside CSS as well as on its own. But it’ll have to wait some time as it must be done carefully and we have a release planned for tomorrow 😃.
BTW, the approach “try everything and stick with what worked” isn’t really that slow. In fact, it’s how we do language detection: we literally try to highlight code with every language we known and stick with the one that successfully highlighted most stuff. The secret of being fast is to bail out early on obvious erros, which is why CSS defined strictly.