MEVN栈中的Prismjs语法高亮显示

Question

我正在使用MEVN堆栈在博客上工作，在这里我使用了 渺渺茫茫 编辑器。现在，所有的工作都很好，除了如果我添加一些代码示例，他们不保留编辑器外的语法高亮，见截图。

我在网上找了很多答案 我找到的最好的答案是这样的： 文章 我发现我应该使用函数Prism.highlightAll()

mounted() {
    Prism.highlightAll()
}

但在我的post.vue组件中的挂载()运行时，它没有做任何事情，但如果我从浏览器控制台运行Prism.highlightAll，它就会像预期的那样工作。

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

这里有一个 密码笔 与我的post.vue

Answer 1

挂载运行的时间太早了（整个DOM还没有真正准备好）。 事实上，你可以在控制台中让这个工作是一个很好的指标，这是一个时间问题。

你应该能够依靠一些标准的JavaScript来计算出什么时候事情是 "完全加载并准备好了"。 也许这些事件中的一个可以工作？

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

...或者...

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

如果你添加了一个事件监听器，我相信你会想把它从 beforeDestroy().