highlightjs / highlightjs/highlight.js

(CSS) Animations highlighting incorrectly

Open
#2,934 19 comments 0 reactions 0 assignees View on GitHub
bug help welcome language
Dominant language
JavaScript
Stars
25k
Forks
3.8k
Avg merge
11h 35m
Merged PRs (30d)
3

Description

**CSS animations highlighting incorrectly**
When writing CSS animations, such as:
```CSS
@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**
```CSS
@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](https://user-images.githubusercontent.com/34835685/102905484-e2b34e00-447b-11eb-952d-5bceb8762e0f.png)

Would be happy if this got fixed. Thanks!

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.