-
Notifications
You must be signed in to change notification settings - Fork 0
Example Plugin Usage
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:
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;
}
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;
}