Подсветка синтаксиса Prism js в стеке MEVN

Question

Я работаю над блогом, используя стек MEVN, в котором я использую редактор tiny-mce- vue. Теперь все работает отлично, за исключением того, что я добавляю образец кода, они не сохраняют подсветку синтаксиса вне редактора, см. Снимок экрана:

I много искал в Интернете, чтобы найти ответ, и лучшее, что я нашел, это статья , где я обнаружил, что мне следует использовать функцию Prism.highlightAll ()

mounted() {
    Prism.highlightAll()
}

, но он ничего не делает, работая из монтируемого () внутри моего сообщения. vue компонент, но если я запускаю Prism.highlightAll из консоли браузера, он работает как и ожидалось.

Короче говоря, я не знаю, что я здесь делаю не так.

Здесь codepen с моим сообщением. vue

Answer 1

Момент, когда смонтированный запущен, слишком рано (на самом деле весь DOM еще не готов). Тот факт, что вы можете выполнить эту работу в консоли, является хорошим индикатором того, что это проблема времени. готов к go ». Возможно, одно из этих событий сработает?

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

... или ...

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

Если вы добавите прослушиватель событий, я думаю, вы захотите удалить его в beforeDestroy().