https://github.com/repalash/example-code-previewer
Code previewer component for html with syntax highlighting, codepen, multiple file support.
https://github.com/repalash/example-code-previewer
Last synced: about 1 year ago
JSON representation
Code previewer component for html with syntax highlighting, codepen, multiple file support.
- Host: GitHub
- URL: https://github.com/repalash/example-code-previewer
- Owner: repalash
- Created: 2023-05-20T16:47:32.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-06-25T13:59:01.000Z (almost 3 years ago)
- Last Synced: 2025-04-09T19:50:30.139Z (about 1 year ago)
- Language: JavaScript
- Homepage: http://repalash.com/example-code-previewer/
- Size: 228 KB
- Stars: 17
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# Example Code Previewer
[](https://www.npmjs.com/package/example-code-previewer)
[](https://opensource.org/licenses/MIT)
A minimal code viewer for html with support for syntax highlighting, multiple files, codepen prefill.
Source code on Github: [https://github.com/repalash/example-code-previewer/](https://github.com/repalash/example-code-previewer/)
## Demo
Check out the [simple](https://repalash.github.io/example-code-previewer/examples/simple.html) and [complex](https://repalash.github.io/example-code-previewer/examples/threejs.html) (with [three.js](https://threejs.org)) live demos
## Usage
Use directly in the HTML file with a CDN link
```html
import {setupCodePreview} from 'https://cdn.jsdelivr.net/gh/repalash/example-code-previewer/dist/index.js'
setupCodePreview(
document.getElementById('container'),
['./script.js', './script.ts'], // scripts
['js', 'ts'],
['https://github.com/repalash/example-code-previewer/tree/master/examples/script.js', 'https://github.com/repalash/example-code-previewer/tree/master/examples/script.ts'], // links (source/github/gitlab etc)
(c)=> c + `\n // Append some code here`,
{ // for codepen
title: 'Example: ' + document.title,
css: document.getElementById('example-style').textContent,
},
).then(actions=>{
// close when the container is clicked
document.querySelector('#container').addEventListener('click', (e)=> e.target.id==='container' && actions.close())
})
```
or install from `npm` and import
```bash
npm install example-code-previewer
```
```js
import {setupCodePreview} from 'example-code-previewer'
```
## Development
Build for development (Build and watch):
```bash
npm run dev
```
To serve the local build and examples, run
```bash
npm run serve
```
Build for production (Build):
```bash
npm run build
```
Generate a new version
```bash
npm version
```
## License
MIT
## References
Syntax highlighting with [Speed highlight JS](https://github.com/speed-highlight/core)
Generated with [rollup-library-starter](https://github.com/repalash/rollup-library-starter)