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

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.

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-ecmascript {
  --cm-keyword-color: green; /* Keywords in JS/TS */
}
.cm-animation {
  --cm-keyword-color: red; /* Keywords in other languages */
}

.cm-animation .language-ecmascript {
  --cm-keyword-color: green; /* Keywords in JS/TS */
}
.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-ecmascript {
  --cm-code-filter: drop-shadow(2px 2px 2px #000); /* Shadow for JS/TS */
}
.cm-animation {
  --cm-code-filter: hue-rotate(90deg); /* Color effect for other languages */
}

.cm-animation .language-ecmascript {
  --cm-code-filter: drop-shadow(2px 2px 2px #000); /* Shadow for JS/TS */
}
.cm-animation {
  --cm-code-filter: hue-rotate(90deg); /* Color effect for other languages */
}

Line numbers

--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.

Gutter decorations

Be extra sure to set --cm-decoration-gutter-font-family to something that supports all the characters/emoji you want to use and make sure that the font is available to all users (eg. via @font-face).

Line decorations

Keep in mind that you control the tags and attributes of your line decorations via their data property. You can therefore have an arbitrary large collection of "classes" of line decorations that can all be styled individually.

Text decorations

Keep in mind that you control the tags and attributes of your text decorations via their data property. You can therefore have an arbitrary large collection of "classes" of text decorations that can all be styled individually.