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/
Check out the simple and complex (with three.js) live demos
Use directly in the HTML file with a CDN link
<script type="module">
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())
})
</script>or install from npm and import
npm install example-code-previewerimport {setupCodePreview} from 'example-code-previewer'Build for development (Build and watch):
npm run devTo serve the local build and examples, run
npm run serveBuild for production (Build):
npm run buildGenerate a new version
npm versionMIT
Syntax highlighting with Speed highlight JS
Generated with rollup-library-starter
