Dont' see text highlight

[pythonfortinero]

Hello. I'm testing the library in nuxt 2 (2.17.0) and I don't see the text, the text area is fine and the copy function is fine too, but the text is not visible I think the styles are not being applied, how can I fix it?

code:

[atheerweb]

same

[brunoosilva]

same here

[vankhanhpr]

same iss

[neil-oliver]

Same here. Anyone had any luck with a fix or alternative? This looks like the exact component I need!

[MarekNguyen]

same

[rohitasare7]

same here

[webgori]

solved in vue 2

YourComponent.vue

this.getQuery() method return raw code

<CodeEditor value="" :languages="[['sql', 'SQL']]" :line-nums="true" :display-language="false" theme="vs" :copy-code="false" @textarea="setTextarea" width="100%" height="380px"></CodeEditor>

setTextarea(textarea) {
  this.textarea = textarea;
},
getQuery() {
  return this.textarea.value;
},

CodeEditor.vue

after

  directives: {
    highlight: {
      insert(el, binding) {
        el.textContent = binding.value;
        hljs.highlightElement(el);
      },
      update(el, binding) {
        if (el.scrolling) {
          el.scrolling = false;
        } else {
          delete el.dataset.highlighted;
          el.textContent = binding.value;
          hljs.highlightElement(el);
        }
      },
    },
  },

[Sneaky1000]

I am using this as a workaround for Vue 3. I hope this helps:

Template/HTML

<CodeEditor v-model="markup" :line-nums="true" :languages="[['html', 'HTML']]" width="100%" font-size="16px" height="315px" border-radius="5px"></CodeEditor>

Script/JS (Just a v-model. Nothing special and not required.)

const markup = ref('')

Style/CSS

.code-editor .code-area > textarea::selection {
    /* Change to whatever color of text you need */
    color: #FFFFFF;
    /* Change to whatever background color you want (I am using Windows 11 default highlight color for Chrome here) */
    background-color: rgba(0, 116, 255, 0.8); 
}

This works for me as it doesn't remove the highlight.js color and only changes the color of user-selected text as it's being highlighted.