Prismjs syntax highlighting in a MEVN stack

Question

I am working on a blog using a MEVN stack where I use the tiny-mce-vue editor. Now, all working great except if I add some code sample, they don't retain the syntax highlighting outside of the editor see screenshot:

I have been surfing the web a lot to find an answer, and the best I found was this article where I found that I should use the function Prism.highlightAll()

mounted() {
    Prism.highlightAll()
}

but it doesn't do anything running from mounted() inside my post.vue component, but if I run the Prism.highlightAll from the browser console it works as expected.

So In short I don't know what I am doing wrong here.

Here a codepen with my post.vue

score 1 · Accepted Answer · answered May 29 '20 at 03:51

The moment that mounted is running is too early (the entire DOM is not really ready yet). The fact that you can make this work in the console is a good indicator that this is a timing issue.

You should be able to rely on some standard JavaScript to figure out when things are "fully loaded and ready to go". Perhaps one of these event would work?

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

...or...

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

If you add an event listener I believe you would want to remove it in beforeDestroy().

Prismjs syntax highlighting in a MEVN stack

1 Answers1