0.1.1 • Published 9 years ago
skulpt-console v0.1.1
______ __ __ _____ __
/ __/ /____ __/ /__ / /_ ____ / ___/__ ___ ___ ___ / /__
_\ \/ '_/ // / / _ \/ __/ /___/ / /__/ _ \/ _ \(_-</ _ \/ / -_)
/___/_/\_\\_,_/_/ .__/\__/ \___/\___/_//_/___/\___/_/\__/
/_/Polymer component wrapping Skulpt and CodeMirror
What is this?
Skulpt-Console is a web component built with Polymer that wraps Skulpt and CodeMirror in a text editor.
Installation and usage
Install it with:
npm
npm i --save skulpt-console
bower
bower install --save skulpt-console
In your html file import the component and just drop the tag. You'll need a <canvas> and a <pre> tag with ids to output the result.
...
<head>
<link rel="import" href="bower_components/skulpt-console.html"/>
</head>
<body>
<skulpt-console>
import turtle
t = turtle.Turtle()
for c in ['red', 'green', 'yellow', 'blue', 'lime']:
t.color(c)
t.forward(72)
t.left(72)
</skulpt-console>
<pre id="output"></pre>
<canvas id="canvas"></canvas>
</body>Skulpt-Console expects the pre element do be identified as 'output' and the canvas as 'canvas'. You can change the names passing the id to it.
<skulpt-console output="my-custom-output" canvas="my-canvas">
...
</skulpt-console>
<div id="my-custom-output"></div>
<div id="my-canvas"></div>Hack Fix to make Code Mirror work properly
You need this hack to refresh the editors on your site.
<script>
var els = document.getElementsByClassName('CodeMirror');
for(var el in els){
el = parseInt(el, 10);
if(!isNaN(el)) {
els[el].CodeMirror.refresh();
}
}
</script>Next features:
- Create an output element
- Console mode (as seen on skulpt.org)
Contributing
Feel free to contribute by sendig a PR.