   ______        __     __          _____                   __
  / __/ /____ __/ /__  / /_  ____  / ___/__  ___  ___ ___  / /__
 _\ \/  '_/ // / / _ \/ __/ /___/ / /__/ _ \/ _ \(_-</ _ \/ / -_)
/___/_/\_\\_,_/_/ .__/\__/        \___/\___/_//_/___/\___/_/\__/
               /_/

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.

Keywords

FAQs

What is skulpt-console?

Is skulpt-console popular?

Is skulpt-console well maintained?

Package last updated on 29 Jun 2015

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

skulpt-console