PreSveltation

Math

Katex

You can of course use any library you want to implement equations, but for our example we are using Katex. You need to install the library first:


SHELL

You can then import the Katex component to which you can pass your math string. There's different ways to create the string. In our case we are escaping the backslash, so the \ is used twice.


SVELTE

Example

To highlight parts of your equation you can use the \htmlClass{}{} function. In the demo slide we duplicate the equation multiple times and always add an extra htmlClass. Next, we put all the equations into an array and update the maxSteps store to reflect the number of updates we want to show. Then we just pass the currStep equation to the Katex component, so only the active equation is shown.


SVELTE