MEVN 堆棧中的 Prismjs 語法突出顯示

Question

我正在使用 MEVN 堆棧開發博客，其中我使用tiny-mce-vue編輯器。 現在，一切都很好，除非我添加一些代碼示例，它們不會在編輯器之外保留語法高亮顯示，請參見屏幕截圖：

我經常瀏覽 web 以找到答案，我找到的最好的是這篇文章，我發現我應該使用 function Prism.highlightAll()

 mounted() { Prism.highlightAll() }

但是它不會從我的 post.vue 組件中的 mounted() 運行任何東西，但是如果我從瀏覽器控制台運行 Prism.highlightAll 它會按預期工作。

所以簡而言之，我不知道我在這里做錯了什么。

這是我的post.vue的代碼筆

Answer 1

mounted 正在運行的時刻還為時過早（整個 DOM 還沒有真正准備好）。 您可以在控制台中完成這項工作這一事實很好地表明這是一個計時問題。

您應該能夠依靠一些標准 JavaScript 來確定什么時候“滿載並准備就緒”。 也許其中一個事件會起作用？

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

...要么...

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

如果你添加一個事件監聽器，我相信你會想在beforeDestroy()中刪除它。