prototype remarkjs slides with Kraken formatting and auto-execute code in browser on slide change! Some rough edges, including two different editors between the first slide and the reveal slide
This commit is contained in:
miloignis committed
1 parent
b89b831983
commit
6ef3392aa0
2 files changed
+113
-1
No files matched your search
@@ -0,0 +1,111 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>My Awesome Presentation</title>
|
||||||
|
<link id="theme" rel="stylesheet" type="text/css" href="recursive.css"/>
|
||||||
|
<link href="favicon.png" rel="icon" type="image/png"/>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||||
|
<style type="text/css">
|
||||||
|
.title > h1 {
|
||||||
|
font-size: 4em;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 2.5em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body onload="loadEverything();">
|
||||||
|
<textarea id="source">
|
||||||
|
|
||||||
|
class: center, middle, title
|
||||||
|
|
||||||
|
# Kraken
|
||||||
|
|
||||||
|
_FOSS Fexprs: <a title="Kraken on GitHub" href="https://github.com/limvot/kraken">https://github.com/limvot/kraken</a>_
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Agenda
|
||||||
|
|
||||||
|
1. Introduction
|
||||||
|
2. Deep-dive
|
||||||
|
3. ...
|
||||||
|
|
||||||
|
[NOTE]: This file is portable; you don't need any other file, or an internet connection for this presentation.
|
||||||
|
---
|
||||||
|
|
||||||
|
# Introduction
|
||||||
|
|
||||||
|
HEre's some test code:
|
||||||
|
|
||||||
|
.run_container[
|
||||||
|
<div class="editor" id="hello_editor">; Of course
|
||||||
|
(println "Hello World")
|
||||||
|
; Just print 3
|
||||||
|
(println "Math works:" (+ 1 2))
|
||||||
|
</div>
|
||||||
|
<button class="run_button" onclick="executeKraken(hello_editor_jar.toString(), 'hello_editor_output')">Run</button> <br>
|
||||||
|
]
|
||||||
|
--
|
||||||
|
<pre><code class="remark_code" id="hello_editor_output">output here...</code></pre>
|
||||||
|
---
|
||||||
|
|
||||||
|
# Another slideo
|
||||||
|
|
||||||
|
boro
|
||||||
|
|
||||||
|
</textarea>
|
||||||
|
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="./default.min.css">
|
||||||
|
<script src="./highlight.min.js"></script>
|
||||||
|
<script type="module">
|
||||||
|
import {CodeJar} from './codejar.js'
|
||||||
|
window.loadEverything = function() {
|
||||||
|
var slideshow = remark.create();
|
||||||
|
document.querySelectorAll('.editor').forEach((editor_div) => {
|
||||||
|
window[editor_div.id + "_jar"] = CodeJar(editor_div, hljs.highlightElement)
|
||||||
|
});
|
||||||
|
slideshow.on('showSlide', function (slide) {
|
||||||
|
console.log('Navigated to', slide)
|
||||||
|
if (slide.properties.continued == "true") {
|
||||||
|
let editor = null
|
||||||
|
for (const c of slide.content) {
|
||||||
|
if (c.class == "run_container") {
|
||||||
|
console.log("found run_container", c)
|
||||||
|
const re = /class="editor" id="([^"]+)"/;
|
||||||
|
let id = c.content[0].match(re)[1]
|
||||||
|
let editor = window[id + "_jar"]
|
||||||
|
console.log("Got editor", editor, "running kraken")
|
||||||
|
executeKraken(editor.toString(), id + "_output")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script>
|
||||||
|
var output_name = ""
|
||||||
|
var Module = {
|
||||||
|
noInitialRun: true,
|
||||||
|
onRuntimeInitialized: () => {
|
||||||
|
},
|
||||||
|
print: txt => {
|
||||||
|
document.getElementById(output_name).innerHTML += txt + "\n";
|
||||||
|
},
|
||||||
|
printErr: txt => {
|
||||||
|
document.getElementById(output_name).innerHTML += "STDERR:[" + txt + "]\n";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
function executeKraken(code, new_output_name) {
|
||||||
|
output_name = new_output_name
|
||||||
|
document.getElementById(new_output_name).innerHTML = "running...\n";
|
||||||
|
Module.callMain(["-C", code]);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript" src="k_prime.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
document.write(unescape("%3Cscript type='text/javascript'%3E" + "require%3Dfunction%28%29%7Bfunction%20e%28t%2Ca%2Cr%29%7Bfunction%20i%28n%2Co%29%7Bif%28%21a%5Bn%5D%29%7Bif%28%21t%5Bn%5D%29%7Bvar%20l%3D%22function%22%3D%3Dtypeof%20require%26%26require%3Bif%28%21o%26%26l%29return%20l%28n%2C%210%29%3Bif%28s%29return%20s%28n%2C%210%29%3Bvar%20c%3Dnew%20Error%28%22Cannot%20find%20module%20%27%22+n+%22%27%22%29%3Bthrow%20c.code%3D%22MODULE_NOT_FOUND%22%2Cc%7Dvar%20d%3Da%5Bn%5D%3D%7Bexports%3A%7B%7D%7D%3Bt%5Bn%5D%5B0%5D.call%28d.exports%2Cfunction%28e%29%7Breturn%20i%28t%5Bn%5D%5B1%5D%5Be%5D%7C%7Ce%29%7D%2Cd%2Cd.exports%2Ce%2Ct%2Ca%2Cr%29%7Dreturn%20a%5Bn%5D.exports%7Dfor%28var%20s%3D%22function%22%3D%3Dtypeof%20require%26%26require%2Cn%3D0%3Bn%3Cr.length%3Bn++%29i%28r%5Bn%5D%29%3Breturn%20i%7Dreturn%20e%7D%28%29%28%7B1%3A%5Bfunction%28e%2Ct%2Ca%29%7Bfunction%20r%28%29%7Bthis._events%3Dthis._events%7C%7C%7B%7D%2Cthis._maxListeners%3Dthis._maxListeners%7C%7Cvoid%200%7Dfunction%20i%28e%29%7Breturn%22function%22%3D%3Dtypeof%20e%7Dfunction%20s%28e%29%7Breturn%22number%22%3D%3Dtypeof%20e%7Dfunction%20n%28e%29%7Breturn%22object%22%3D%3Dtypeof%20e%26%26null%21%3D%3De%7Dfunction%20o%28e%29%7Breturn%20void%200%3D%3D%3De%7Dt.exports%3Dr%2Cr.EventEmitter%3Dr%2Cr.prototype._events%3Dvoid%200%2Cr.prototype._maxListeners%3Dvoid%200%2Cr.defaultMaxListeners%3D10%2Cr.prototype.setMaxListeners%3Dfunction%28e%29%7Bif%28%21s%28e%29%7C%7Ce%3C0%7C%7CisNaN%28e%29%29throw%20TypeError%28%22n%20must%20be%20a%20positive%20number%22%29%3Breturn%20this._maxListeners%3De%2Cthis%7D%2Cr.prototype.emit%3Dfunction%28e%29%7Bvar%20t%2Ca%2Cr%2Cs%2Cl%2Cc%3Bif%28this._events%7C%7C%28this._events%3D%7B%7D%29%2C%22error%22%3D%3D%3De%26%26%28%21this._events.error%7C%7Cn%28this._events.error%29%26%26%21this._events.error.length%29%29%7Bif%28%28t%3Darguments%5B1%5D%29instanceof%20Error%29throw%20t%3Bvar%20d%3Dnew%20Error%28%27Uncaught%2C%20unspecified%20%22error%22%20event.%20%28%27+t+%22%29%22%29%3Bthrow%20d.context%3Dt%2Cd%7Dif%28a%3Dthis._events%5Be%5D%2Co%28a%29%29return%211%3Bif%28i%28a%29%29switch%28arguments.length%29%7Bcase%201%3Aa.call%28this%29%3Bbreak%3Bcase%202%3Aa.call%28this%2Carguments%5B1%5D%29%3Bbreak%3Bcase%203%3Aa.call%28this%2Carguments%5B1%5D%2Carguments%5B2%5D%29%3Bbreak%3Bdefault%3As%3DArray.prototype.slice.call%28arguments%2C1%29%2Ca.apply%28this%2Cs%29%7Delse%20if%28n%28a%29%29for%28s%3DArray.prototype.slice.call%28arguments%2C1%29%2Cc%3Da.slice%28%29%2Cr%3Dc.length%2Cl%3D0%3Bl%3Cr%3Bl++%29c%5Bl%5D.apply%28this%2Cs%29%3Breturn%210%7D%2Cr.prototype.addListener%3Dfunction%28e%2Ct%29%7Bvar%20a%3Bif%28%21i%28t%29%29throw%20TypeError%28%22listener%20must%20be%20a%20function%22%29%3Breturn%20this._events%7C%7C%28this._events%3D%7B%7D%29%2Cthis._events.newListener%26%26this.emit%28%22newListener%22%2Ce%2Ci%28t.listener%29%3Ft.listener%3At%29%2Cthis._events%5Be%5D%3Fn%28this._events%5Be%5D%29%3Fthis._events%5Be%5D.push%28t%29%3Athis._events%5Be%5D%3D%5Bthis._events%5Be%5D%2Ct%5D%3Athis._events%5Be%5D%3Dt%2Cn%28this._events%5Be%5D%29%26%26%21this._events%5Be%5D.warned%26%26%28a%3Do%28this._maxListeners%29%3Fr.defaultMaxListeners%3Athis._maxListeners%29%26%26a%3E0%26%26this._events%5Be%5D.length%3Ea%26%26%28this._events%5Be%5D.warned%3D%210%2Cconsole.error%28%22%28node%29%20warning%3A%20possible%20EventEmitter%20memory%20leak%20detected.%20%25d%20listeners%20added.%20Use%20emitter.setMaxListeners%28%29%20to%20increase%20limit.%22%2Cthis._events%5Be%5D.length%29%2C%22function%22%3D%3Dtypeof%20console.trace%26%26console.trace%28%29%29%2Cthis%7D%2Cr.prototype.on%3Dr.prototype.addListener%2Cr.prototype.once%3Dfunction%28e%2Ct%29%7Bfunction%20a%28%29%7Bthis.removeListener%28e%2Ca%29%2Cr%7C%7C%28r%3D%210%2Ct.apply%28this%2Carguments%29%29%7Dif%28%21i%28t%29%29throw%20TypeError%28%22listener%20must%20be%20a%20function%22%29%3Bvar%20r%3D%211%3Breturn%20a.listener%3Dt%2Cthis.on%28e%2Ca%29%2Cthis%7D%2Cr.prototype.removeListener%3Dfunction%28e%2Ct%29%7Bvar%20a%2Cr%2Cs%2Co%3Bif%28%21i%28t%29%29throw%20TypeError%28%22listener%20must%20be%20a%20function%22%29%3Bif%28%21this._events%7C%7C%21this._events%5Be%5D%29return%20this%3Bif%28a%3Dthis._events%5Be%5D%2Cs%3Da.length%2Cr%3D-1%2Ca%3D%3D%3Dt%7C%7Ci%28a.listener%29%26%26a.listener%3D%3D%3Dt%29delete%20this._events%5Be%5D%2Cthis._events.removeListener%26%26this.emit%28%22removeListener%22%2Ce%2Ct%29%3Belse%20if%28n%28a%29%29%7Bfor%28o%3Ds%3Bo--%20%3E0%3B%29if%28a%5Bo%5D%3D%3D%3Dt%7C%7Ca%5Bo%5D.listener%26%26a%5Bo%5D.listener%3D%3D%3Dt%29%7Br%3Do%3Bbreak%7Dif%28r%3C0%29return%20this%3B1%3D%3D%3Da.length%3F%28a.length%3D0%2Cdelete%20this._events%5Be%5D%29%3Aa.splice%28r%2C1%29%2Cthis._events.removeListener%26%26this.emit%28%22removeListener%22%2Ce%2Ct%29%7Dreturn%20this%7D%2Cr.prototype.removeAllListeners%3Dfunction%28e%29%7Bvar%20t%2Ca%3Bif%28%21this._events%29return%20this%3Bif%28%21this._events.removeListener%29return%200%3D%3D%3Darguments.length%3Fthis._events%3D%7B%7D%3Athis._events%5Be%5D%26%26dLine truncated
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -45,9 +45,10 @@ h2 { font-size: 3em; }
|
|||||||
h3 { font-size: 1.5em; }
|
h3 { font-size: 1.5em; }
|
||||||
h4 { font-size: 1.2em; }
|
h4 { font-size: 1.2em; }
|
||||||
i { --rec-slnt: -14; }
|
i { --rec-slnt: -14; }
|
||||||
|
em { --rec-slnt: -14; }
|
||||||
b { --rec-wght: 600; }
|
b { --rec-wght: 600; }
|
||||||
.run_container { position: relative; }
|
.run_container { position: relative; }
|
||||||
.editor {
|
.editor, .remark-code, .remark-inline-code {
|
||||||
font-family: 'Recursive', monospace;
|
font-family: 'Recursive', monospace;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
--rec-mono: 1;
|
--rec-mono: 1;
|
||||||
|
|||||||
Reference in new issue
Block a user