https://github.com/yysun/apprun-code
https://github.com/yysun/apprun-code
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/yysun/apprun-code
- Owner: yysun
- Created: 2024-08-16T15:34:58.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-08T20:11:31.000Z (12 months ago)
- Last Synced: 2025-01-08T21:38:17.724Z (12 months ago)
- Language: TypeScript
- Size: 307 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
## AppRun Code Editor
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](https://apprun.js.org/docs/).
> It uses the [React Monaco Editor](https://github.com/suren-atoyan/monaco-react) for code editing. And run the code in a preview iframe.
>
> The web component is built with [AppRun](https://github.com/yysun/apprun).
## Use the web component
Place the web component in your HTML file under the code snippet you want to demo.
```html
// some HTML / JS /JSX code here
```
## Style the web component
You can style the web component with CSS. For example, you can set the height of the web component.
```html
```
You can set the width of the source code.
```html
```
You can also completely hide the source code, just to demo the code.
```html
```
## Development
* Use _npm start_ to start the dev server
* Use _npm run build_ to build the demo
* Use _npm run build:lib_ to build the web component