For including code blocks into your slides you can use the SvHighlight library. SvHighlight was build for this project, but was then published as a separate package. Head over to the SvHighlight documentation to see how to set it up and how you can customize it.
You might want to highlight different sections of your code at different points in your presentation. You might also have a lot of code to display on your slide. Instead of spreading the code out to many different slides, SvHighlight allows us to specify "Focus Blocks". In focus blocks we can specify the lines we want to highlight and the line that should be scrolled into view.
To make this work, we also need to tell the slide how many steps should exist on the slide, which
we can do by simply updating the $maxSteps store value to the number of focus blocks
we want to highlight on a slide (inside onMount). Next, we can pass the
currStep
store to SvHighlight's code block activeFocusBlockStore prop. If you have a lot of
code and want a scrollbar to appear you also need to specify the dimensions. The
focus blocks will then automatically update and scroll to the highlighted sections as you use the
arrow keys on your slide.