# CSS

You can style your animation by tweaking the very large number of CSS variables documented on this page. There are also [several style hooks](./Hooks.md) that you can attach other CSS for eg. backgrounds and borders to.

## General styles

| Property                     | Notes                                                                                                                                   |
| ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| `font-family`                | Must be monospaced                                                                                                                      |
| `font-size`                  | Scales the entire animation, which uses a grid based on the font size                                                                   |
| `--cm-line-height`           | Line height in multiples of `1ch` (meaning a unitless number that scales the line height)                                               |
| `--cm-content-margin-top`    | Distance of content (tokens, line number etc.) to the top. CSS [`<length>`](https://developer.mozilla.org/en-US/docs/Web/CSS/length)    |
| `--cm-content-margin-left`   | Distance of content (tokens, line number etc.) to the left. CSS [`<length>`](https://developer.mozilla.org/en-US/docs/Web/CSS/length)   |
| `--cm-content-margin-bottom` | Distance of content (tokens, line number etc.) to the bottom. CSS [`<length>`](https://developer.mozilla.org/en-US/docs/Web/CSS/length) |
| `--cm-content-margin-right`  | Distance of content (tokens, line number etc.) to the right. CSS [`<length>`](https://developer.mozilla.org/en-US/docs/Web/CSS/length)  |
| `--cm-align-middle`          | Turns vertical centering on (`1`) or off (`0`)                                                                                          |
| `--cm-scene-background`      | See [`background`](https://developer.mozilla.org/en-US/docs/Web/CSS/background) property                                                |
| `--cm-scene-filter`          | Global filter effect, see [`filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) property                                  |

## Syntax highlighting

The syntax highlighter categorizes each token as one of the following types, for which you can define the [`color`](https://developer.mozilla.org/en-US/docs/Web/CSS/color), [`font-weight`](https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight) and [`font-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style):

| Type                   | Available CSS properties                                                                                     |
| ---------------------- | ------------------------------------------------------------------------------------------------------------ |
| Generic                | `--cm-color`<br>`--cm-style`<br>`--cm-weight`                                                                |
| `string`               | `--cm-string-color`<br>`--cm-string-weight`<br>`--cm-string-style`                                           |
| `number`               | `--cm-number-color`<br>`--cm-number-weight`<br>`--cm-number-style`                                           |
| `keyword`              | `--cm-keyword-color`<br>`--cm-keyword-weight`<br>`--cm-keyword-style`                                        |
| `alternativeKeyword`   | `--cm-alternativeKeyword-color`<br>`--cm-alternativeKeyword-weight`<br>`--cm-alternativeKeyword-style`       |
| `tag`                  | `--cm-tag-color`<br>`--cm-tag-weight`<br>`--cm-tag-style`                                                    |
| `alternativeTag`       | `--cm-alternativeTag-color`<br>`--cm-alternativeTag-weight`<br>`--cm-alternativeTag-style`                   |
| `attribute`            | `--cm-attribute-color`<br>`--cm-attribute-weight`<br>`--cm-attribute-style`                                  |
| `alternativeAttribute` | `--cm-alternativeAttribute-color`<br>`--cm-alternativeAttribute-weight`<br>`--cm-alternativeAttribute-style` |
| `declaration`          | `--cm-declaration-color`<br>`--cm-declaration-weight`<br>`--cm-declaration-style`                            |
| `literal`              | `--cm-literal-color`<br>`--cm-literal-weight`<br>`--cm-literal-style`                                        |
| `value`                | `--cm-value-color`<br>`--cm-value-weight`<br>`--cm-value-style`                                              |
| `operator`             | `--cm-operator-color`<br>`--cm-operator-weight`<br>`--cm-operator-style`                                     |
| `invocation`           | `--cm-invocation-color`<br>`--cm-invocation-weight`<br>`--cm-invocation-style`                               |
| `type`                 | `--cm-type-color`<br>`--cm-type-weight`<br>`--cm-type-style`                                                 |
| `comment`              | `--cm-comment-color`<br>`--cm-comment-weight`<br>`--cm-comment-style`                                        |
| `alternativeComment`   | `--cm-alternativeComment-color`<br>`--cm-alternativeComment-weight`<br>`--cm-alternativeComment-style`       |
| `punctuation`          | `--cm-punctuation-color`<br>`--cm-punctuation-weight`<br>`--cm-punctuation-style`                            |

Token categorization is hardcoded into the syntax highlighter. If you work with multiple languages, you might want to apply different styles to different tokens depending on the language. This is possible because the output wraps tokens of each language in a container element with a class matching the language:

```css
.cm-animation .language-javascript {
  --cm-keyword-color: green; /* Keywords in JavaScript */
}
.cm-animation .language-typescript {
  --cm-keyword-color: blue; /* Keywords in TypeScript */
}
.cm-animation {
  --cm-keyword-color: red; /* Keywords in other languages */
}
```

To apply [`filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) effects to either all syntax highlighted
code or specific languages, you can use the same approach with the `--cm-code-filter` variable:

```css
.cm-animation .language-javascript {
  --cm-code-filter: drop-shadow(2px 2px 2px #000); /* Shadow only for JS */
}
.cm-animation .language-typescript {
  --cm-code-filter: blur(3px); /* Blur effect only for TS */
}
.cm-animation {
  --cm-code-filter: hue-rotate(90deg); /* Color effect for other languages */
}
```

## Line numbers

| Property                         | Notes                                                                            |
| -------------------------------- | -------------------------------------------------------------------------------- |
| `--cm-line-numbers-enabled`      | Turns line numbers on (`1`) or off (`0`)                                         |
| `--cm-line-number-font`          | See [`font`](https://developer.mozilla.org/en-US/docs/Web/CSS/font) property     |
| `--cm-line-number-color`         | Accepts any color value                                                          |
| `--cm-line-numbers-margin-left`  | CSS [`<length>`](https://developer.mozilla.org/en-US/docs/Web/CSS/length)        |
| `--cm-line-numbers-margin-right` | CSS [`<length>`](https://developer.mozilla.org/en-US/docs/Web/CSS/length)        |
| `--cm-line-numbers-filter`       | See [`filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) property |

The value of `--cm-line-numbers-margin-left` gets added to `--cm-content-margin-left` to determine the final left margin value.
