DEV Community

Richard Beattie
Richard Beattie

Posted on • Originally published at r-bt.com

Using Svelte-Notion & Code Blocks

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";
Enter fullscreen mode Exit fullscreen mode

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)