<p>
The <strong>pen</strong> plugin changes the layout - placing the result on top and the editors side by side. It also allows you to resize the editor columns.
</p>
<link rel="stylesheet" href="../bower_components/codemirror/lib/codemirror.css">
<script src="../bower_components/codemirror/lib/codemirror.js"></script>
<script src="../bower_components/codemirror/mode/javascript/javascript.js"></script>
<script src="../bower_components/codemirror/mode/css/css.js"></script>
<script src="../bower_components/codemirror/mode/xml/xml.js"></script>
<script src="../bower_components/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<div id="jotted-demo-pen" style="height: 28em"></div>
<link href="../jotted.css" rel="stylesheet">
<script src="../jotted.js"></script>
<script>
new Jotted(document.querySelector('#jotted-demo-pen'), {
files: [
{
type: 'html',
content: '<h1>\n Pen Plugin\n</h1>'
},
{
type: 'js',
content: 'console.log("Hello World")'
},
{
type: 'css',
content: 'body {\n background: yellow;\n}'
}
],
plugins: [ 'codemirror', 'console', 'pen' ]
});
</script>