MEVN 堆栈中的 Prismjs 语法高亮显示答案

【问题标题】：Prismjs syntax highlighting in a MEVN stackMEVN 堆栈中的 Prismjs 语法高亮显示
【发布时间】：2020-05-28 16:32:43
【问题描述】：

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

我一直在网上冲浪以寻找答案，我发现最好的是这个article，我发现我应该使用函数 Prism.highlightAll()

mounted() {
    Prism.highlightAll()
}

但它不会执行任何从我的 post.vue 组件中的 mount() 运行的操作，但如果我从浏览器控制台运行 Prism.highlightAll，它会按预期工作。

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

这里是 codepen 和我的 post.vue

【问题讨论】：

【解决方案1】：

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

您应该能够依靠一些标准的 JavaScript 来判断事情何时“完全加载并准备就绪”。也许其中一个事件会起作用？

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

...或...

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

如果你添加一个事件监听器，我相信你会想在beforeDestroy() 中删除它。

【讨论】：