MEVN 堆栈中的 Prismjs 语法突出显示

Question

我正在使用 MEVN 堆栈开发博客，其中我使用 tiny-mce-vue 编辑器。现在，一切都很好，除非我添加一些代码示例，它们不会在编辑器之外保留语法突出显示，请参见屏幕截图：

我经常上网寻找答案，我找到的最好的答案是这个 article 我发现我应该使用函数 Prism.highlightAll()

mounted() {
    Prism.highlightAll()
}

但是它在我的 post.vue 组件中从 mounted() 运行ning 没有做任何事情，但是如果我从浏览器控制台运行 Prism.highlightAll 它按预期工作。

所以简而言之，我不知道我在这里做错了什么。

这里是 codepen 和我的 post.vue

Answer 1

挂载时间运行为时过早（整个DOM还没有真正准备好）。您可以在控制台中完成这项工作这一事实很好地表明这是一个时间问题。

您应该能够依靠一些标准 JavaScript 来判断事情何时 "fully loaded and ready to go"。也许其中一项活动会奏效？

mounted() {
  window.addEventListener('load', () => {
       // Prism magic goes here
  })
}

...或者...

mounted() {
  document.onreadystatechange = () => { 
    if (document.readyState == "complete") { 
      // Prism magic goes here
    } 
  }
},

如果您添加一个事件侦听器，我相信您会希望在 beforeDestroy() 中删除它。

Prismjs syntax highlighting in a MEVN stack