1
<script context="module">
    import { getArticle } from '../api/cms.js'
    import marked from 'marked';
    import prism from 'prismjs';

    marked.setOptions({
      langPrefix: "language-",
      highlight: function(code, lang) {
        if (lang) {
            if (!prism.languages[lang]) {
                require(`prismjs/components/prism-${lang}.js`);
            }
            let highlighted = prism.highlight(code, prism.languages[lang], lang);
            // console.log(highlighted) => I see it's highlighted with prism.
            return highlighted; // => however, this doesn't return highlighted code, but return s raw code.
            // return 'a' => I see this replaces code with 'a', so I can ensure this process is working.
        }
      }
    })

    export function preload({ params, query }) {
        return getArticle(params)
            .then(async post => {
                post = marked(post);
                return { post };
            });
    }
</script>

<script>
    export let post;
</script>

<div class='content'>
    {@html post}
</div>

这不会导致错误,但代码块不会突出显示......正如我在评论中所写,我看到该过程正常工作,但是在实际网络上却没有。

4

0 回答 0