I use svelte-notion to dynamic add learning pieces to my personal site a Notion table. It's a really nice experience and uses Splitbee's Notion-API-Worker. However I had some difficulty getting code-highlighting to work.
svelte-notion uses PrismJS to do the highlighting. This package takes a string of code and then formats it by wrapping the code in different elements with different classes. Of course, to get them styled you have to import a style-sheet from PrismJS, I like Okaidia.
Sapper has built-in support for importing css files so it's as simple as:
import "prismjs/themes/prism-okaidia.css";
Unfortunately this didn't work properly as svelte-notion doesn't wrap the code in a pre and code tag as PrismJS requires: https://prismjs.com/#basic-usage . I've submitted a pull-request but I'm not sure if the package is still maintained so have forked it here
Top comments (0)