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.

    Install

    npm i skulpt-console

    DownloadsWeekly Downloads

    2

    Version

    0.1.1

    License

    MIT

    Last publish

    Collaborators

    • petcomputacaoufpr
    • vytorcalixto