highlight.js: (CSS) Animations highlighting incorrectly

CSS animations highlighting incorrectly When writing CSS animations, such as:

@keyframes animation {
  10.1% {
    left: 10px;
  }
}

It highlights incorrectly.

  • animation isn’t highlighted as a variable
  • 10.1% isn’t highlighted as an hljs-number as it should be
  • .1 is highlighted as a hljs-selector-class.

Language: CSS

I used highlight

Sample Code to Reproduce

@keyframes animation {
  10.1% {
    left: 10px;
  }
}

Or any other CSS animation, really. Example JSFiddle: https://jsfiddle.net/barhatsor/oz14ewyx/2/

Expected behavior Turns out Github also higlights it incorrectly so here’s a picture of CodeMirror getting it right:

Codemirror

Would be happy if this got fixed. Thanks!

About this issue

  • Original URL
  • State: open
  • Created 4 years ago
  • Comments: 19 (18 by maintainers)

Most upvoted comments

FYI css_consistency is rebased and merged into master now.

We’ll see if @allejo has any thoughts. I been working on the CSS consistency more and this is pretty simple once you flatten the grammar… you can just use from/to keywords at the top-level for the frame positives, easy peasy. So complexity shouldn’t stop us.