mirror of
https://github.com/zekexiao/pocketlang.git
synced 2025-02-06 12:46:53 +08:00
33 lines
851 B
HTML
33 lines
851 B
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">print('hello world!')</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), {
|
||
|
|
indentOn: /[(\[{]$/
|
||
|
|
})
|
||
|
|
|
||
|
|
jar.updateCode(localStorage.getItem('code'))
|
||
|
|
jar.onUpdate(code => {
|
||
|
|
localStorage.setItem('code', code)
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script async type="text/javascript" src="{{ STATIC_DIR }}try_now.js"></script>
|