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