javascript - MEVN 堆栈中的 Prismjs 语法高亮显示

Question

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

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

mounted() {
    Prism.highlightAll()
}

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

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

这是我的 post.vue的代码笔

score 1 · Accepted Answer

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

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

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

...或者...

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

如果您添加一个事件侦听器，我相信您会希望在beforeDestroy().

1 回答 1