highlightjs vue 无法实时更新

Question

代码如下：

<no-ssr placeholder="加载中" v-highlight>
      <pre>{{mycode}}<code style="atom-one-dark" :class="myCodeClass">{{mycode}}</code></pre>
    </no-ssr>

const hljs = require('highlight.js');

    Vue.directive('highlight', {

        

        inserted: el => {

            let blocks = el.querySelectorAll('pre code');

            blocks.forEach( (block) => {
                hljs.highlightBlock(block);
            });

            console.log('test1');

        },

        componentUpdated: el => {

            let blocks = el.querySelectorAll('pre code');

            blocks.forEach( (block) => {
                hljs.highlightBlock(block);
            });

            console.log('test22', blocks);

        },

    });

当mycode这个变量更新的时候，html里面的{{mycode}}是实时更新的。但是highlightjs显示的代码依然还是旧的代码，如何解决呢？

Answer 1

自己解决了。
我发现人家已经写好了插件了。具体可以看人家的源码实现：
https://github.com/metachris/...

Answer 2

怎么解决的？我这里也遇到了这个问题

Answer 3

用了，但是没有效果啊