Styling hooks

Style hooks are attachment points for CSS that goes beyond tweaking CSS variables to adjust the syntax highlighter. They are CSS variables that contain information about the animation, such as the number of rows, the total width, or the width of the line number colum. Your CSS can use this information to add dimension-dependent borders, backgrounds, or decorative gimmicks (such as a fake editor window) to your animation.

Properties Notes
--vertical-align Either 1 or 0
--total-rows, --total-cols Overall max number of rows and columns
--current-rows, --current-cols Number of rows and columns for the current animation keyframe
--total-width, --total-height Overall max width and height (CSS <length>), that includes margins, line numbers, offsets etc.
--current-width, --current-height Width and height (CSS <length>) for the current animation keyframe
--line-numbers-width Width (CSS <length>) of the line number colum (if enabled)

Note: these variables are meant to be read by your CSS when defining ::before and/or ::after! Setting them to new values will have no effect.

Example: window background

You can attach the pseudo elements ::before and ::after to the main animation element .cm-animation, which gives you two extra boxes to play with. As children of the element animation element they inherit all of its important CSS properties (such as the transition-duration), including the above styling hooks. The following example show how you can use ::before and the styling hooks to attach a background "window" to an animation that smoothly grows and shrinks to track the number of lines displayed in each keyframe:

.cm-animation::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(var(--vertical-align) * 50%);
  left: 0;
  width: 100%;
  height: var(--current-height);
  background: #fff;
  transform: translateY(calc(var(--vertical-align) * -50%));
  transition-property: all;
  transition-duration: inherit;
  border-radius: 1em;
  box-shadow: 0 0 2em #ccc;
}
123456789101112131415
.cm-animation::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(var(--vertical-align) * 50%);
  left: 0;
  width: 100%;
  height: var(--current-height);
  background: #fff;
  transform: translateY(calc(var(--vertical-align) * -50%));
  transition-property: all;
  transition-duration: inherit;
  border-radius: 1em;
  box-shadow: 0 0 2em #ccc;
}