# Highlight code by dimming the rest

**URL:** <https://zola.discourse.group/t/highlight-code-by-dimming-the-rest/1038>\
**Category:** Feature requests\
**Created:** [September 25, 2021, 11:45am UTC](https://zola.discourse.group/t/highlight-code-by-dimming-the-rest/1038 "2021-09-25T11:45:10Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ejiek](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/ejiek/32/603_2.png) [@ejiek](https://zola.discourse.group/u/ejiek)\
**Post date:** [September 25, 2021, 11:45am UTC](https://zola.discourse.group/t/highlight-code-by-dimming-the-rest/1038/1 "2021-09-25T11:45:10Z")

</div>

Right now highlighting works by actual highlighting

```
```rust,hl_lines=1 3-5 9
```

This can be too overwhelming whith syntax highlighting enabled.

There is an alternative approach.  
We can dim not highlighted code.

Revealjs has a good example [baked in](https://revealjs.com/code/#line-numbers-%26-highlights)

---

<div class="post-metadata">

**Author:** ![keats](https://avatars.discourse-cdn.com/v4/letter/k/34f0e0/32.png) [@keats](https://zola.discourse.group/u/keats)\
**Post date:** [September 28, 2021, 7:41pm UTC](https://zola.discourse.group/t/highlight-code-by-dimming-the-rest/1038/2 "2021-09-28T19:41:45Z")

</div>

I believe you should be able to do that via CSS with the current code?

---

<div class="post-metadata">

**Author:** ![ejiek](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/ejiek/32/603_2.png) [@ejiek](https://zola.discourse.group/u/ejiek)\
**Post date:** [October 17, 2021, 3:34pm UTC](https://zola.discourse.group/t/highlight-code-by-dimming-the-rest/1038/3 "2021-10-17T15:34:34Z")

</div>

This might be possible but I have no idea how to achieve this =\

Right now highlighting works by wrapping a line in a `mark` with `background-color:#65737e30;` style. (default value from base16-ocean-dark is used)

This allows to lower the brightness for `pre` and turn in back up for `pre mark`.  
Unfortunately, cascading doesn’t play well with cancelling filters and due to having close to zero CSS experience, I don’t see an alternative.

Also I’m unable to override `background-color` is CSS because it’s defined explicitly in `mark`. Does it mean that a custom version of a highlighting theme is needed to make it similar to the rest of the code?

---

<div class="post-metadata">

**Author:** ![ejiek](https://yyz2.discourse-cdn.com/free1/user_avatar/zola.discourse.group/ejiek/32/603_2.png) [@ejiek](https://zola.discourse.group/u/ejiek)\
**Post date:** [October 17, 2021, 4:14pm UTC](https://zola.discourse.group/t/highlight-code-by-dimming-the-rest/1038/4 "2021-10-17T16:14:40Z")

</div>

First part seems to be easy:

```auto
pre span {
  filter: brightness(70%);
}
pre mark span {
  filter: brightness(100%);
}

```

This way the rest of the code is dimmed while highlighted parts are still highlighted.

* * *

The problem of a custom theme prevails =\