Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: HTML5 preview</title>
<script src='http://code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'></script>
<link rel="stylesheet" href=http://codemirror.net/doc/docs.css>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="http://codemirror.net/mode/css/css.js"></script>
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="http://codemirror.net/keymap/extra.js"></script>
  
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="http://codemirror.net/theme/3024-day.css">
<link rel="stylesheet" href="http://codemirror.net/theme/3024-night.css">
<link rel="stylesheet" href="http://codemirror.net/theme/ambiance.css">
<link rel="stylesheet" href="http://codemirror.net/theme/base16-dark.css">
<link rel="stylesheet" href="http://codemirror.net/theme/base16-light.css">
<link rel="stylesheet" href="http://codemirror.net/theme/blackboard.css">
<link rel="stylesheet" href="http://codemirror.net/theme/cobalt.css">
<link rel="stylesheet" href="http://codemirror.net/theme/eclipse.css">
<link rel="stylesheet" href="http://codemirror.net/theme/elegant.css">
<link rel="stylesheet" href="http://codemirror.net/theme/erlang-dark.css">
<link rel="stylesheet" href="http://codemirror.net/theme/lesser-dark.css">
<link rel="stylesheet" href="http://codemirror.net/theme/midnight.css">
<link rel="stylesheet" href="http://codemirror.net/theme/monokai.css">
<link rel="stylesheet" href="http://codemirror.net/theme/neat.css">
</head>
<body>
  <textarea id=code name=code>
&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=utf-8&gt;
    &lt;title&gt;HTML5 canvas demo&lt;/title&gt;
    &lt;style&gt;p {font-family: monospace;}&lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;Canvas pane goes here:&lt;/p&gt;
    &lt;canvas id=pane width=300 height=200&gt;&lt;/canvas&gt;
    &lt;script&gt;
      var canvas = document.getElementById('pane');
      var context = canvas.getContext('2d');
​
      context.fillStyle = 'rgb(250,0,0)';
      context.fillRect(10, 10, 55, 50);
​
      context.fillStyle = 'rgba(0, 0, 250, 0.5)';
      context.fillRect(30, 30, 55, 50);
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</textarea>
    <iframe id=preview></iframe>
  
    <p>Select a theme: <select onchange="selectTheme()" id=select>
        <option value="0" selected>default</option>
        <option value="1">3024-day</option>
        <option value="2">3024-night</option>
        <option value="3">ambiance</option>
        <option value="4">base16-dark</option>
        <option value="5">base16-light</option>
        <option value="6">blackboard</option>
        <option value="7">cobalt</option>
        <option>eclipse</option>
        <option>elegant</option>
        <option>erlang-dark</option>
        <option>lesser-dark</option>
        <option>midnight</option>
        <option>monokai</option>
        <option>neat</option>
        <option>night</option>
    </select></p>
    
  <button id="changetheme" style="margin-top: -35px; float: right;">Cobalt</button>
</body>
</html>
 
.CodeMirror {
    float: left;
    width: 50%;
    border: 1px solid black;
}
​
iframe {
    width: 49%;
    float: left;
    height: 300px;
    border: 1px solid black;
    border-left: 0px;
}
 
// Initialize CodeMirror editor with a nice html5 canvas demo.
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true,
    styleActiveLine: true,
    matchBrackets: true
});
​
// Sets the theme
var input = document.getElementById("select");
​
function selectTheme() {
    var theme = input.options[input.selectedIndex].innerHTML;
    editor.setOption("theme", theme);
}
​
$(function() {
    $('#changetheme').click(themechange);
​
    function themechange() {
        if (
            $("#select").val(0)) {
            $("#select").val(7).trigger('change');
        }
        else if (
            $("#select").val(7)) {
            $("#select").val(0).trigger('change');
        }
    }
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers