Как запустить Prismjs в компоненте Svelte? - PullRequest
Новая
       42

Как запустить Prismjs в компоненте Svelte?

0 голосов
/ 07 ноября 2019

Я просто пытаюсь внедрить Prismjs в мой проект Svelte.

Я загружаю CSS в свой <head> и импортирую JS в свой компонент Svelte.

Я сталкиваюсь с подобной проблемой, описанной здесь: https://medium.com/get-it-working/get-prismjs-working-in-react-a6d989e59290

По сути, мне кажется, мне нужно перезапустить скрипт после рендеринга компонента. Я пытаюсь сделать это так же, как это описано в React в статье, запустив Prism.highlightAll() внутри жизненного цикла onMount.

Я надеялся, что этот подход сработает, но яникуда не денетсяМне все еще нужно обновить страницу, чтобы стили вступили в силу. Что мне здесь не хватает?

1 Ответ

0 голосов
/ 07 ноября 2019

tldr;это не было проблемой Svelte. Это была проблема с моим сериализатором для утилиты Sanity blocks-to-html.

Привет @RichHarris! Собрав репо для репродукции, я обнаружил, что призма работает, как и ожидалось. Тогда я смог сузить свою проблему.

Я должен был упомянуть вначале, я использую Sapper и загружаю контент из Sanity. Я сделал модификацию сериализатора для утилиты Sanity block-content-to-html, которая преобразует мой переносимый текст в разметку. Тег <pre> получает data-language='HTML' от Sanity, а CSS Prism ожидает class="language-HTML. Я изменил свой сериализатор на: 

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

, который работал после обновления. Атрибут класса был добавлен, и CSS применен. Я просто пролистываю код, так как не знаю, как работает blocksToHtml, но после изменения свойства объекта на className все работает как положено: 

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

Спасибоза взгляд, Рич! Я действительно наслаждаюсь Svelte!

...