JSFiddle - React, Tailwind, and code Playground
HTML
<pre id="pre1">
animation.runMovementAnimation(mySprite, [], 500, false);
</pre>
JavaScript
/* message signatures
export interface RenderBlocksRequestMessage extends SimulatorMessage {
type: "renderblocks",
id: string;
code: string;
options?: {
package?: string;
packageId?: string;
snippetMode?: boolean;
}
}
export interface RenderBlocksResponseMessage extends SimulatorMessage {
source: "makecode",
type: "renderblocks",
id: string;
svg?: string;
width?: number;
height?: number;
}*/
var makeCodeRenderPre = makeCodeRenderPre || (function () {
// pre waiting to be rendered
// when undefined, iframe is loaded and ready
var pendingPres = [];
function injectRenderer() {
var f = document.getElementById("makecoderenderer");
// check iframe already added to the DOM
if (f) {
return;
}
var f = document.createElement("iframe");
f.id = "makecoderenderer";
f.style.position = "absolute";
f.style.left = 0;
f.style.bottom = 0;
f.style.width = "1px";
f.style.height = "1px";
f.src = "https://arcade.makecode.com/--docs?render=1"
document.body.appendChild(f);
}
function renderPre(pre) {
console.log('render ' + pre.id)
var f = document.getElementById("makecoderenderer");
// check if iframe is added and ready (pendingPres is undefined)
if (!f || !!pendingPres) {
// queue up
pendingPres.push(pre);
injectRenderer();
} else {
f.contentWindow.postMessage({
type: "renderblocks",
id: pre.id,
code: pre.innerText,
options: {
packageId: pre.getAttribute("pub")
}
}, "https://arcade.makecode.com/");
}
}
// listen for messages
window.addEventListener("message", function (ev) {
var msg = ev.data;
if (msg.source != "makecode") return;
...