带有商店和棱镜库问题的 Svelte js答案

【问题标题】：Svelte js with store and Prism library issue带有商店和棱镜库问题的 Svelte js
【发布时间】：2021-07-09 21:41:10
【问题描述】：

我正在尝试将 Prism 库 (https://prismjs.com/) 添加到 Svelte 3 应用程序。添加 Prism 脚本后，存储变量将停止更新。

store.js

import { writable } from 'svelte/store';
const store = writable({
    num: 1
});
export default store;

App.svelte

<script>
    import store from './store';
    import { onMount } from 'svelte';
    let prismScript = null;

    onMount(async () => {
        let prismScript = document.createElement('script');
        prismScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js';
        document.head.append(prismScript);
    });
</script>

<button type="button" on:click={ evt => { store.update($store.num++) } }>Button</button>

<!-- this one works -->
<p>{$store.num}</p>

<!-- this one doesn't work -->
<pre class="language-html">
 <code>{$store.num}</code>
</pre>

另请参阅此处的 Svelte REPL 示例： https://svelte.dev/repl/99b7294424a84bcd9e6212cfbd537a77?version=3

谢谢

【问题讨论】：

标签： javascript svelte svelte-3 prismjs

【解决方案1】：

<script>
    import store from './store';

    let prismLoaded = false;
    let html = '';
    $: {
        if (prismLoaded && window.Prism) {
            html = `<div>${$store.num}</div>`;
            html = Prism.highlight(html, Prism.languages.html, 'html');
        }
    }
</script>

<svelte:head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css" rel="stylesheet" />
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js" 
        async data-manual on:load={() => prismLoaded = true}
    ></script>
</svelte:head>

<button type="button" on:click={() => $store.num++}>Button</button>
<pre><code>{@html html}</code></pre>

https://svelte.dev/repl/a75062e0ed1c48a4bca5c83a744f7112

【讨论】：