search

webdevnerdstuff / vue-code-block

Vue 3 CodeBlock - Highlight your code with ease using this syntax highlighting component powered by PrismJS or Highlight.js.
https://webdevnerdstuff.github.io/vue-code-block/
MIT License
37 stars 3 forks source link

[Bug Report]: #58

Closed winneryong closed 3 days ago

winneryong commented 1 week ago

Vue Code Block Version

2.3.3

Vue Version

3

Bug description

<VCodeBlock
    :code="code"
    highlightjs
    label="Hello World"
    lang="html"
    theme="neon-bunny"
  />

When the code value is updated to be empty, the displayed content does not update.

Steps to reproduce

  1. set code value <html><body>123</body></html>
  2. code viewer display <html><body>123</body></html>
  3. set code value to empty string ``
  4. code viewer always display <html><body>123</body></html>

Relevant log output

No response

Additional context

No response

Code of Conduct

webdevnerdstuff commented 3 days ago

This is how the code libraries work. To have the code update you would need to re-render the component. A quick and dirty method would be to give the code block element a key, and when the code changes, change the key.

ex.

<template>
  <VCodeBlock
    :key="blockKey"
    :code="code"
    highlightjs
    lang="js"
  />

  <button @click="code = `const foo = 'bar';`; blockKey = 2;">Change Code</button>
</template>

<script setup>
  const code = ref(`const foo = 'foo';`);
  const blockKey = ref(1);
</script>