Open donghhan opened 1 year ago
You can use the <CH.Preview>
component, it's not documented yet. But you can use any component inside
<CH.Preview>
<h1>Lorem ipsum</h1>
</CH.Preview>
Or use an URL: <CH.Preview show="/some/url" />
@pomber In the component that you just used <CH.Preview show="/some/url" />
, prop show
indicates the codesandbox preset repository?
As there is no documentation on this, I still have no clue how to use with it.
The show
prop is any url, it works like an iframe (well, it is an iframe).
What are you trying to do?
Is there anyway I can make preview feature for HTML and CSS? Or maybe sometimes JS only?
With the Scrollycoding preset
prop you can use most codesandboxes as a template. You can use the Vanilla
template from codesandbox for example.
I am trying to show readers step-by-step tutorial with the CSS & JavaScript effect instead of just throwing them whole code and make them cook by themselves.
I tried what you suggested <CH.Preview>
but it seems it does not show up on the format.
---
title: How to make Glitch effect with CSS and JavaScript
full: true
---
<iframe
src="https://codesandbox.io/embed/glitching-effect-text-tkxu1z?autoresize=1&fontsize=14&hidenavigation=1&theme=dark"
style={{
width: '100%',
height: '50%',
border: 0,
overflow: 'hidden',
background: 'rgb(21, 21, 21)'
}}
title="glitching-effect-text"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
/>
<CH.Preview show="https://codesandbox.io/s/glitching-effect-text-tkxu1z" />
## References
1. <a href="https://velog.io/@yunsungyang-omc/HTML-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%86%8D%EC%84%B1-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-data-attribute" target="_blank">(HTML) 데이터 속성 사용하기 (data attribute)</a>
Below is an image
@pomber could we use React Component in <CH.Preview>
like below, and <CreateForm />
will be render
the
./Form.tsx
file required at the current project
<CH.Preview frameless>
const CreateForm = require("./Form");
<CreateForm />
</CH.Preview>
@pomber could we use React Component in
<CH.Preview>
like below, and<CreateForm />
will be render
Yes, if the framework you are using allows it. See mdx docs on how to import. But it's basically this:
import CreateForm from './Form'
...
<CH.Preview frameless>
<CreateForm />
</CH.Preview>
@pomber Thanks, This project helps me a lot.
@pomber so is CH.Preview
supposed to both show the code and render an example? It does not seem to show anything for me.
@pomber so is
CH.Preview
supposed to both show the code and render an example? It does not seem to show anything for me.
can you provide an example? https://play.codehike.org/
@pomber so is
CH.Preview
supposed to both show the code and render an example? It does not seem to show anything for me.can you provide an example? https://play.codehike.org/
Try out what you suggested above:
<CH.Preview>
<h1>Lorem ipsum</h1>
</CH.Preview>
It renders an empty section with a button to click to go view the example I guess. I'm trying to have the code displayed and have an example of the code running, without needing to duplicate the code twice. Unsure if that is what CH.Preview
is for or not?
it needs some height if you want to render the mini-brower view:
<CH.Preview style={{height: 200}}>
<h1>Lorem ipsum</h1>
</CH.Preview>
it needs some height if you want to render the mini-brower view:
<CH.Preview style={{height: 200}}> <h1>Lorem ipsum</h1> </CH.Preview>
Oh I see! Thank you. Is there a way to display both the code and the preview? I would like people to be able to see the code and what it is rendered as, without needing to duplicate the code.
I can see preview feature is only workable for React's component-wise. Is there anyway I can make preview feature for HTML and CSS? Or maybe sometimes JS only?