Comments (5)
children
will pass child-elements - including slots - to a component
from mount-vue-component.
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)
from mount-vue-component.
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.
from mount-vue-component.
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.
from mount-vue-component.
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!
from mount-vue-component.
Related Issues (14)
- API change?
- HMR handling (vite) HOT 1
- Dynamic props HOT 1
- How to pass as argument a globally-defined component imported from a third party package? HOT 1
- Can this mount vuetify and/or custom Vue Components? HOT 1
- Tests
- Thanks for this was super helpful for modals etc. HOT 1
- How to apend to some element? HOT 6
- Can't call mount function in setup HOT 3
- Usage with appendChild HOT 1
- parent property of VNode and Component are not set HOT 1
- Can't get a reference to the mounted element HOT 4
- Allow prop type to be inferred HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mount-vue-component.