Can I pass data as a slot rather than as a prop? about mount-vue-component

[pearofducks]

children will pass child-elements - including slots - to a component

[fabricepallaud]

Thanks! Below is my code using the children option. First I call the syntax highlighting plugin in question statically as a "control experiment", second I mount it dynamically using your package.

<template>
  <div>
    <ssh-pre language="js" label="Javascript">
      const i = 3;
    </ssh-pre>

    <div class="myElement"></div>
  </div>
</template>

<script setup>
import SshPre from 'simple-syntax-highlighter'
import 'simple-syntax-highlighter/dist/sshpre.css'

onMounted(() => {
  mount(SshPre, {
    element: document.querySelector('.myElement'),
    props: {
      language: 'javascript'
    },
    children: 'const i = 3;'
  })
})
</script>

It works but it also doesn't work. As you can see in attached screenshot, when calling the syntax highlighting plugin statically, the code snippet to be rendered is correctly split into bits wrapped in span elements with various CSS classes.

However when calling the same plugin dynamically using your package, this does not happen. Instead, the code snippet to be rendered is interpreted as HTML by the browser which is obviously not what I want.

Any idea what might cause this issue?

(annoyingly, I'm not sure which of the two packages/plugins is causing the issue)

[pearofducks]

Unless this is a contrived example, it seems like you might rather want something like teleport for this usecase?

This plugin is generally intended for something like a 'singleton' component like a Toast (or really a ToastController) - where the end-user shouldn't really care what element it gets mounted into nor need to manually place the element themselves.

[fabricepallaud]

Basically I fetch a WordPress post containing (potentially) multiple code snippets each wrapped in code and pre tags. I then go through the fetched post looking for such tags and every time I find a code snippet I want to dynamically mount an instance of my code syntax highlighting plugin.

I made an attempt before with a different syntax highlighting plugin and it failed, now I'm trying with a second syntax highlighting plugin but it's still failing. I would try with GitHub gists but after googling that around I gave up as I don't see how it could be done.

It is strange because to me, syntax highlighting code snippets from a fetched post sounds like a very basic and very common thing. And yet few people seem to have done it and it seems difficult to achieve.

[pearofducks]

Nothing you've described seems to need this module.

I unfortunately don't have time to support questions like this that aren't bugs and are just general code questions. The Vue Discord is really helpful and might be a good place to ask and discuss with others!