how to use it in vue.js with vue.directive

[ze-ming]

I want use it in vue with its directive with hightlightjs, how to use it?

Vue.directive('highlightjs', {
  deep: true,
  bind: function(el, binding) {
    // on first bind, highlight all targets
    let targets = el.querySelectorAll('code')
    targets.forEach((target) => {
      // if a value is directly assigned to the directive, use this
      // instead of the element content.
      if (binding.value) {
        target.textContent = binding.value
        console.log(target)
      }
      hljs.highlightBlock(target)
      // hljs.lineNumbersBlock(target)
    })
  },
  componentUpdated: function(el, binding) {
    // after an update, re-fill the content and then highlight
    let targets = el.querySelectorAll('code')
    targets.forEach((target) => {
      if (binding.value) {
        target.textContent = binding.value
        // hljs.initLineNumbersOnLoad();
        hljs.highlightBlock(target)

        // hljs.lineNumbersBlock(target)
      }
    })
  }
})

[Yauheni Pakala]

I haven't experience in vue.js, but found some solution for you in vue-highlightjs package:

https://github.com/metachris/vue-highlightjs/blob/master/index.js#L8

To continue will be the same as highlightjs,

Usage - initialization: https://github.com/wcoder/highlightjs-line-numbers.js#usage

[小遁哥]

I want use it in vue with its directive with hightlightjs, how to use it?

Vue.directive('highlightjs', {
  deep: true,
  bind: function(el, binding) {
    // on first bind, highlight all targets
    let targets = el.querySelectorAll('code')
    targets.forEach((target) => {
      // if a value is directly assigned to the directive, use this
      // instead of the element content.
      if (binding.value) {
        target.textContent = binding.value
        console.log(target)
      }
      hljs.highlightBlock(target)
      // hljs.lineNumbersBlock(target)
    })
  },
  componentUpdated: function(el, binding) {
    // after an update, re-fill the content and then highlight
    let targets = el.querySelectorAll('code')
    targets.forEach((target) => {
      if (binding.value) {
        target.textContent = binding.value
        // hljs.initLineNumbersOnLoad();
        hljs.highlightBlock(target)

        // hljs.lineNumbersBlock(target)
      }
    })
  }
})

[小遁哥]

I want use it in vue with its directive with hightlightjs, how to use it?

Vue.directive('highlightjs', {
  deep: true,
  bind: function(el, binding) {
    // on first bind, highlight all targets
    let targets = el.querySelectorAll('code')
    targets.forEach((target) => {
      // if a value is directly assigned to the directive, use this
      // instead of the element content.
      if (binding.value) {
        target.textContent = binding.value
        console.log(target)
      }
      hljs.highlightBlock(target)
      // hljs.lineNumbersBlock(target)
    })
  },
  componentUpdated: function(el, binding) {
    // after an update, re-fill the content and then highlight
    let targets = el.querySelectorAll('code')
    targets.forEach((target) => {
      if (binding.value) {
        target.textContent = binding.value
        // hljs.initLineNumbersOnLoad();
        hljs.highlightBlock(target)

        // hljs.lineNumbersBlock(target)
      }
    })
  }
})

but the format is invalid！

[tanganyu1114]

@xiaodun 这个问题你找到解决的办法了吗？遇到相同的问题了，求告知，谢谢

[ze-ming]

I import highlight.js and highlightjs-line-numbers.js in index.html. Then use following code to initialize:

hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad();

when it comes to update the highlight code and just use following code to re-render it:

this.code = hljs.highlightAuto(this.shader.vs).value;  // in my case , this.shader.vs is the target code
hljs.initLineNumbersOnLoad();

The html code is here:

<pre ><code v-html="code">



 </code></pre>

[tanganyu1114]

I try it ,but failed o(╥﹏╥)o , Thanks all the way

[ze-ming]

I try it ,but failed o(╥﹏╥)o , Thanks all the way

where did you initialize the format？

[ZhouJianGuo]

i have solved this problem, and i've recorded it in my blog https://www.zhoujianguo.ltd/#/fore/article?id=140

[hywhuangyuwei]

My Vue3 + TypeScript + "vue-plugin-load-script" package solution:

import * as vue from 'vue'
import hljs from "highlight.js";
import {loadScript} from "vue-plugin-load-script";

const codeStr = vue.ref("")

vue.onBeforeMount(async () => {
  // codeStr.value = "..."

  await vue.nextTick();
  (window as any).hljs = hljs;
  loadScript("https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js").then(() => {
    (window as any).hljs.initLineNumbersOnLoad();
  })
})

<template>
  <div>
    <highlightjs :code="codeStr" />
  </div>
</template>