❤
npm
Sign UpSign In

skulpt-console

0.1.1 • Public • Published 
   ______        __     __          _____                   __
  / __/ /____ __/ /__  / /_  ____  / ___/__  ___  ___ ___  / /__
 _\ \/  '_/ // / / _ \/ __/ /___/ / /__/ _ \/ _ \(_-</ _ \/ / -_)
/___/_/\_\\_,_/_/ .__/\__/        \___/\___/_//_/___/\___/_/\__/
               /_/

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.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.1.1
    2
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 0.1.1
    2
  • 0.1.0
    1

Package Sidebar

Install

npm i skulpt-console

Repository

github.com/PETComputacaoUFPR/skulpt-console

Homepage

github.com/PETComputacaoUFPR/skulpt-console

Weekly Downloads

3

Version

0.1.1

License

MIT

Last publish

Collaborators

  • petcomputacaoufpr
  • vytorcalixto
Try on RunKit
Report malware