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 that you can attach other CSS for eg. backgrounds and borders to.

General styles

Property Notes
font-family Must be monospaced. See the documentation on typographic edge cases for information about emoji and CJK full-width characters
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 dimensionless number that scales the line height)
--cm-content-margin-top Distance of content (tokens, line number etc.) to the top. CSS <length>
--cm-content-margin-left Distance of content (tokens, line number etc.) to the left. CSS <length>
--cm-content-margin-bottom Distance of content (tokens, line number etc.) to the bottom. CSS <length>
--cm-content-margin-right Distance of content (tokens, line number etc.) to the right. CSS <length>
--cm-align-middle Turns vertical centering on (1) or off (0)
--cm-scene-background See background property
--cm-scene-filter Global filter effect, see filter property

Syntax highlighting

The syntax highlighter categorizes each token as one of the following types, for which you can define the color, font-weight and font-style:

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

.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 */
}
123456789
.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 effects to either all syntax highlighted code or specific languages, you can use the same approach with the --cm-code-filter variable:

.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 */
}
123456789
.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 property
--cm-line-number-color Accepts any color value
--cm-line-numbers-margin-left CSS <length>
--cm-line-numbers-margin-right CSS <length>
--cm-line-numbers-filter See filter property

--cm-line-numbers-margin-left and --cm-line-numbers-margin-right only have an effect when line numbers are turned on. In this case, the value of --cm-line-numbers-margin-left gets added to --cm-content-margin-left to determine the final left margin value.