DEV Community

loading...

Using Svelte-Notion & Code Blocks

Richard Beattie
Gap Year Student | MIT '25
Originally published at r-bt.com ・1 min read

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

Discussion (0)

Forem Open with the Forem app