Nearly Perfected Mystique

    polymer-code-mirror

    0.1.0 • Public • Published

    Code-Mirror

    Polymer element wrapping CodeMirror

    What is this?

    Code-Mirror is a Web Component made with Polymer that wraps a default text-area with CodeMirror's highlight syntax, plugins and options.

    Installation and usage

    Install with npm:

    npm i --save polymer-code-mirror

    Install with Bower

    bower install --save polymer-code-mirror

    In your html file import the component and just drop the tag.

    ...
    <head>
        <link rel="import" href="bower_components/code-mirror.html"/>
    </head>
    <body>
        <code-mirror mode="python" theme="solarized dark">
        import turtle
     
        t = turtle.Turtle()
     
        for c in ['red', 'green', 'yellow', 'blue', 'lime']:
            t.color(c)
            t.forward(72)
            t.left(72)
        </code-mirror>
    </body>

    <code-mirror> expects a mode (the language). If none is passed, the syntax highlight will not work.

    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

    • Add all modes and plugins from CodeMirror
    • Fix hack above

    Contributing

    Feel free to contribute by sendig a PR.

    Install

    npm i polymer-code-mirror

    DownloadsWeekly Downloads

    3

    Version

    0.1.0

    License

    MIT

    Last publish

    Collaborators

    • petcomputacaoufpr
    • vytorcalixto