This project creates a web component for demonstrating HTML/JS code snippets in web pages, especially for documentation. e.g., It is used in the AppRun documentation.
It uses the React Monaco Editor for code editing. And run the code in a preview iframe.
The web component is built with AppRun.
Place the web component in your HTML file under the code snippet you want to demo.
<pre>
// some HTML / JS /JSX code here
</pre>
<apprun-code></apprun-code>You can style the web component with CSS. For example, you can set the height of the web component.
<apprun-code style="height: 90vh"></apprun-code>You can set the width of the source code.
<apprun-code code-with="50%"></apprun-code>You can also completely hide the source code, just to demo the code.
<apprun-code hide-code="true"></apprun-code>- Use npm start to start the dev server
- Use npm run build to build the demo
- Use npm run apprun-code to build the web component