@lume/live-code
Version:
A `<live-code>` element for editable code with live output.
92 lines (80 loc) • 3.82 kB
HTML
<html lang="en">
<head>
<title>live-code</title>
<meta
name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>
<link rel="icon" href="./favicon.ico" />
</head>
<body>
<script type="importmap">
{
"imports": {
"@babel/runtime/helpers/extends": "../node_modules/@babel/runtime/helpers/esm/extends.js",
"@codemirror/autocomplete": "../node_modules/@codemirror/autocomplete/dist/index.js",
"@codemirror/commands": "../node_modules/@codemirror/commands/dist/index.js",
"@codemirror/lang-css": "../node_modules/@codemirror/lang-css/dist/index.js",
"@codemirror/lang-html": "../node_modules/@codemirror/lang-html/dist/index.js",
"@codemirror/lang-javascript": "../node_modules/@codemirror/lang-javascript/dist/index.js",
"@codemirror/language": "../node_modules/@codemirror/language/dist/index.js",
"@codemirror/lint": "../node_modules/@codemirror/lint/dist/index.js",
"@codemirror/search": "../node_modules/@codemirror/search/dist/index.js",
"@codemirror/state": "../node_modules/@codemirror/state/dist/index.js",
"@codemirror/view": "../node_modules/@codemirror/view/dist/index.js",
"@lezer/common": "../node_modules/@lezer/common/dist/index.js",
"@lezer/css": "../node_modules/@lezer/css/dist/index.js",
"@lezer/highlight": "../node_modules/@lezer/highlight/dist/index.js",
"@lezer/html": "../node_modules/@lezer/html/dist/index.js",
"@lezer/javascript": "../node_modules/@lezer/javascript/dist/index.js",
"@lezer/lr": "../node_modules/@lezer/lr/dist/index.js",
"@lume/element": "../node_modules/@lume/element/dist/index.js",
"@lume/live-code/": "../",
"@marijn/find-cluster-break": "../node_modules/@marijn/find-cluster-break/src/index.js",
"@uiw/codemirror-theme-noctis-lilac": "../node_modules/@uiw/codemirror-theme-noctis-lilac/esm/index.js",
"@uiw/codemirror-themes": "../node_modules/@uiw/codemirror-themes/esm/index.js",
"classy-solid": "../node_modules/classy-solid/dist/index.js",
"code-mirror-el": "../node_modules/code-mirror-el/dist/index.js",
"codemirror": "../node_modules/codemirror/dist/index.js",
"crelt": "../node_modules/crelt/index.js",
"lowclass": "../node_modules/lowclass/dist/index.js",
"lowclass/": "../node_modules/lowclass/",
"solid-js": "../node_modules/solid-js/dist/solid.js",
"solid-js/html": "../node_modules/solid-js/html/dist/html.js",
"solid-js/web": "../node_modules/solid-js/web/dist/web.js",
"style-mod": "../node_modules/style-mod/src/style-mod.js",
"thememirror/": "../node_modules/thememirror/",
"w3c-keyname": "../node_modules/w3c-keyname/index.js"
}
}
</script>
<script type="module">
import '@lume/live-code/dist/TestFeatures.js'
</script>
<test-features></test-features>
<h2>This example loads code content from an external HTML file.</h2>
<live-code src="https://docs.lume.io/guide/install/cdn-install-example.html" mode="html>iframe"></live-code>
<h2>This example loads code content from a child <code><template></code> element.</h2>
<live-code mode="html>iframe">
<template>
<h1 id="example">Example from template</h1>
<script>
example.style.color = 'hotpink'
</script>
</template>
</live-code>
<h2>This example loads code content from a another element using a selector.</h2>
<live-code content="#other-element" mode="html>iframe"></live-code>
<template id="other-element">
<h1 id="example">Example from other element</h1>
<script>
function randomColor() {
example.style.color = `hsl(${Math.random()}turn, 60%, 80%)`
}
randomColor()
setInterval(randomColor, 1000)
</script>
</template>
</body>
</html>