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;
}