CODEWITHSUNDEEP
javascriptsvelteprismjs
Esten
Esten

Reputation: 1395

How do I run Prismjs in a Svelte component?

I'm simply trying to implement Prismjs into my Svelte project.

I'm loading the CSS in my <head> and I'm importing the JS in my Svelte component.

I'm running into a similar issue described here: https://medium.com/get-it-working/get-prismjs-working-in-react-a6d989e59290

Basically, it seems I need to re-run the script after the component has rendered. I'm trying to accomplish this in the same way as it's described in React in the article by running Prism.highlightAll() inside of the onMount lifecycle.

I was hoping this approach would work, but I'm not getting anywhere. I still have to refresh the page to see the styles take effect. What am I missing here?

Upvotes: 1

Views: 776

Answers (1)

Esten
Esten

Reputation: 1395

tldr; this wasn't a Svelte issue. It was an issue with my serializer for Sanity's blocks-to-html utility.

Hi @RichHarris! Upon putting together a repo for reproduction, I found prism worked as expected. I was then able to narrow down my issue.

I should have mentioned initially, I'm using Sapper and pulling in content from Sanity. I made a modification to the serializer for Sanity's block-content-to-html utility that is converting my portable text to markup. The <pre> tag is getting data-language='HTML' from Sanity, and the Prism CSS is expecting class="language-HTML. I modified my serializer to:

code: ({node}) => 
    h(
        "pre", 
        {
            "data-language": node.language, "class": "language-" + node.language
        }, 
        h("code", {}, node.code)
    )

Which was working after refreshing. The class attribute was getting added, and the CSS applied. I'm just sort of thumbing through the code as I don't really know how blocksToHtml works, but upon changing the object property to className, everything is working as expected:

code: ({node}) => 
    h(
        "pre", 
        {
            "data-language": node.language, className: "language-" + node.language
        }, 
        h("code", {}, node.code)
    )

Thanks for taking a look, Rich! I'm really enjoying Svelte!

Upvotes: 1

Related Questions