Skip to content

Latest commit

 

History

History
90 lines (72 loc) · 2.78 KB

README.md

File metadata and controls

90 lines (72 loc) · 2.78 KB
Raw

Poster

Join the chat at https://gitter.im/jdfreder/poster

HTML5 canvas based code editor.
Demo at http://jdfreder.github.io/poster/.

Install

First install node.js.
Then install Poster inside the directory that you will be using it in:

npm install posterjs

Use (via HTML)

In an HTML file:

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="node_modules/posterjs/build/poster.css">
        <script type="text/javascript" src="node_modules/posterjs/build/poster.js"></script>
    </head>
    <body>
        <div id="demo"></div>
        <script type="text/javascript">
            var demo_element = document.getElementById('demo');
            var poster = new poster.Poster();
            demo_element.appendChild(poster.el);

            // Set Poster's size, language, and value.
            poster.width = 600;
            poster.height = 300;
            poster.language = 'javascript';
            poster.value = "// Code here...";
        </script>
    </body>
</html>

Loading additional languages

Download the language(s) files you want to use from PrismJS's repository here. Place the files in the directory that you're using Poster in. Then inside your document's <head> tag, include the Javascript file(s) after Poster. i.e. Using the above example, adding support for Python:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="node_modules/posterjs/build/poster.css">
    <script type="text/javascript" src="node_modules/posterjs/build/poster.js"></script>
    <script type="text/javascript" src="prism-python.min.js"></script>
  </head>
  <body>
    <div id="demo"></div>
    <script type="text/javascript">
        var demo_element = document.getElementById('demo');
        var poster = new poster.Poster();
        demo_element.appendChild(poster.el);

        // Set Poster's size, language, and value.
        poster.width = 600;
        poster.height = 300;
        poster.language = 'python';
        poster.value = "# Code here...";
    </script>
  </body>
</html>

Build

Runtime Poster doesn't depend on any libraries, prism.js is built into it for syntax highlighting. Building Poster is simple. First (fork&)clone this repository:

git clone https://github.com/jdfreder/poster.git
cd poster

Install node.js and then install the other dependencies:

npm install

Now you can build Poster:

gulp

The compiled output will be written to the build directory.