I am using the "Toolbar" and "Copy To Clipboard" plugins with PrismJS to display a code snippet and a toolbar button to copy the code to clipboard and am loading my Prism js and css files in my <head>.
PrismJS works as expected if I start directly to the page (ex: http://localhost:3000/demo/example).
But if I navigate away from the page and return to it or start from the home page (http://localhost:3000/) and navigate to the page with the code snippet the button does not show up.
When I inspect the code I can see that the <div class="toolbar"> that normally holds the Copy button is missing.
I tried loading the PrismJS file with plugins via a plugin and adding the file in nuxt.config.js and that prevents the Copy button showing up at all.
Why might this be happening?
After checking out this blog I realized I needed to "highlight" all the prism codeblocks in the Mounted lifecycle like so:
...
import Prism from "~/plugins/prism";
export default {
mounted() {
Prism.highlightAll();
},
...
I didn't use the prism npm package like in the article, I just downloaded it from the PrismJS homepage and included it and the styles in my nuxt.config.js.
For React users, you can do that using react useEffect hook, something like this:
useEffect(() => {
const highlight = () => {
Prism.highlightAll();
};
highlight();
}, []);
Related
I use Next.js and Material UI. I need to render an element in another place, because of the Swiper library that I use.
For this purpose, I'm using Material UI's <Portal> component and here's my code:
import { useRef } from 'react'
import Portal from '#mui/material/Portal';
//more code here
const container = useRef(null);
//more code here
<div ref={container}></div>
//more code here
<Swiper
spaceBetween={20}
slidesPerView={1}
>
<Portal container={container.current}>
<SwiperButton></SwiperButton>
</Portal>
{
ads.map(ad => <SwiperSlide key={ad.imageUrl}>
<div>{ad.title}</div>
</SwiperSlide>
)}
</Swiper>
This code works just fine for the first load of my web page. But as soon as I refresh the web page, it vanishes and disappears completely and there is no error whatsoever in the console.
And no matter what I do, it won't come back. Ctrl+F5 does not work and stopping and destroying and recreating my container does not work.
The only way to make it work is to comment that part of code, load the page and uncomment it again.
Why is it so, and how can I fix this problem?
im having a simple web component running on my page. By a button click i simply remove the element expecting that the element and the class behind it is getting killed. But actually it keeps running, for example event listeners are still running even after removing it from the DOM.
This is how i add it to the DOM and make it load:
import { LightningElement, createElement } from 'lwc';
import App from 'my/app';
export default class App extends LightningElement {
...
const appinner = createElement('my-app', { is: App });
document.body.appendChild(app);
...
}
Then i simply remove it by this:
const app = document.querySelector('my-app');
app.remove(); // or app.parentNode.removeChild(app);
Everything in my "App" class is still running even when its gone. How can i really make it unload (or deconstruct) or even kill so no logic keeps running.
Update: Missed to mention i am using LWC library from lwc.dev. And the proper way of injecting an element is described here: Link
Update2: Added more code to show how its really done using the LWC.dev library
I am using react helmet async for changing my document title. The problem is,
my home page is at route /home and on button link it will take the use about page. The about component is being rendered but the problem is my document title in browser is still the same.. When i reload the page, it shows About as document title but when coming from home component.
So i found a solution using Hooks.
useEffect(() => {
document.title = "About Page";
}, []);
But what i need to know is should i run the clean up function wherever i call this use effect Hook.
I am beginner at angular JS and ionic framework!
I need to integrate a static web page inside my app using InAppBrowser; I tried to insert the code in home.ts file but I don't know what to write in home.html file!!
All I need the functionality of opening predefined webpage inside home.ts that appears as soon as I press home button in tab theme.
I would be grateful If some one helped me.
You don't need to include anything in your html-file. Only if you want to open the static webpage using a button in your app.
Just include plugin and the function in your home.ts-file with:
import { InAppBrowser } from '#ionic-native/in-app-browser'
and add the InAppBrowser to your constructor like this:
constructor(private iab: InAppBrowser) { }
and finally declare your function with:
openBrowser(){
const browser = this.iab.create('https://ionicframework.com/');
}
If you would like to open the static webpage at the startup of the app just add the openBrowser-Function to the ionViewDidLoad-Function which is being executed every loading the Home-Page.
ionViewDidLoad(){
this.openBrowser();
}
so your final home.ts should look like this:
import { InAppBrowser } from '#ionic-native/in-app-browser'
export class HomePage {
constructor(private iab: InAppBrowser) {}
ionViewDidLoad(){
this.openBrowser();
}
openBrowser(){
const browser = this.iab.create('https://ionicframework.com/');
}
}
For more information check the plugin documentation: click
I want to build something like this inside of my app:
Whenever a user request for a page load important contents normally,
then grab some HTML code from server and display them at the bottom of
the loaded page without any refresh at all.
Another thing I want:
Whenever a user request for a page I want to just load navigation and footer and then grab the main HTML code from my server and display them on the screen without any page refresh and while that runs I want tot display a loading icon.
One more thing I want:
There is a huge functionality within one of my pages that use javascript code which is 80KB and it take 2 seconds just to load that code. User will probably use that functionality after 3min from the page loaded. (they have to read some contents and do stuff before that), is there a way to load that code without any page refresh while they are reading contents?
I've already know how to grab JSON from server and display them to user using react, what I don't know is how to grab actual code such as HTML or javascript from server using react.
I cannot find any tutorials about that in react topic, should I learn something else to do that? Should I learn server-side rendering to accomplish that?
You can return a HTML string from the server and use dangerouslySetInnerHTML to insert it into your react component. here is an example for the header and footer example you gave:
import React from 'react';
export default class App extends React.Component {
constructor() {
super();
this.state = {
header: 'loading the header',
footer: 'loading the footer'
}
}
componentWillMount() {
fetch('/api/header-and-footer')
.then(res => {
this.setState({header: res.data.header, footer: res.data.footer})
});
}
render() {
return (
<div>
<div className='my-header' dangerouslySetInnerHTML={{__html: this.state.header}} />
<div className='my-content'>Hello world</div>
<div className='my-footer' dangerouslySetInnerHTML={{__html: this.state.footer}} />
</div>
)
}
}
Then all you would have to return from your server would be an object like this:
{
header: '<div>This is my header content</div>',
footer: '<div>This is my footer content</div>'
}
Here is some more information on dangerouslySetInnerHTML:
https://facebook.github.io/react/docs/dom-elements.html
You could also do this with server side rendering but I think that is too complicated for what you want to do with this. However here are some links if you need/want them:
https://facebook.github.io/react/docs/react-dom-server.html
http://redux.js.org/docs/recipes/ServerRendering.html