pocketlang/docs/pages/Getting Started/try it now.html

<main id="code-editor">

	<div id="try-title">
	<p>code editor</p> <a id="run-button">run</a>
	</div>
	
	<div class="editor language-ruby" id="code-area"></div>
	
	<p>output</p>
	<pre><div id="output">...</div></pre>
</main>
	
<script type="module">
	const editor = document.querySelector('.editor')
	
	//const highlight = editor => {
	//	// highlight.js does not trim old tags,
	//	// let's do it by this hack.
	//	editor.textContent = editor.textContent;
	//	editor.innerHTML = Prism.highlight(editor.textContent, Prism.languages.ruby, 'ruby');
	//}
	
	const jar = CodeJar(editor, withLineNumbers(highlight_fn), {
		indentOn: /[(\[{]$/
	})
	
	jar.updateCode(localStorage.getItem('code'))
	jar.onUpdate(code => {
		localStorage.setItem('code', code)
	})
</script>

<script async type="text/javascript" src="{{ STATIC_DIR }}pocketlang.js"></script>