Example Plugin Usage

Implicit page styles

If you wanted to style every page in a folder a certain way, it doesn't make sense that you'd need to individually add a cssclass property to each of them. If you had to move a page in or out of the folder, you'd have to add or remove the property every time. It'd be much more intuitive if a CSS class was added automatically and required no work on the user side. That's what this plugin does.

The following three example pages are styled differently, and none of them need to specify their own styling metadata.

Here's a live example of a page updating its style dynamically based on a tag:

Pictures that adjust to light/dark mode

With SVG styling, you can create diagrams that react to the editor's theme. Here's an example:

The embedded music notation in the middle of the page is an SVG image. It's able to change color because of CSS specified in a theme/snippet:

.theme-light svg * { 
    fill: black !important;
}
.theme-dark svg * { 
    fill: white !important;
}

Diagrams whose text can change font

The same feature shown above can also be used to dynamically change the font used in vector images:

svg tspan {
    font-family: 'My Font' !important;
}