HTML5 canvas based code editor.
Demo at http://jdfreder.github.io/poster/.
First install node.js.
Then install Poster inside the directory that you will be using it in:
npm install posterjs
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>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>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.