<title>CodeMirror</title>

<meta charset="utf-8"/>

<link rel=stylesheet href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.38.0/codemirror.min.css">

<link rel=stylesheet href="addon/hint/show-hint.css">

<link rel=stylesheet href="doc/docs.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.38.0/codemirror.min.js"></script>

<script src="mode/javascript/javascript.js"></script>

<script src="mode/velocity/velocity.js"></script>

<script src="mode/python/python.js"></script>

<script src="addon/hint/show-hint.js"></script>

<script src="addon/hint/anyword-hint.js"></script>

<script src="addon/hint/velocity-hint.js"></script>

<script src="addon/display/autorefresh.js"></script>

body {

background-color: #eee;

}

<section id="demo">

<h2> Text Editor Demo </h2>

<form style="position: relative; margin-top: .5em;">

<textarea id="code" name="code">

#define( $hello ) Hello $who #end #set( $who = "World!") $hello ## displays Hello World!

#foreach( $customer in $customerList )

$foreach.count $customer.Name

#if( $foo == ${bar})

it's true!

#break

#{else}

it's not!

#stop

#end

#if ($foreach.parent.hasNext)

$velocityCount

#end

#end

$someObject.getValues("this is a string split

across lines")

$someObject("This plus $something in the middle").method(7567).property

#set($something = "Parseable string with '$quotes'!")

#macro( tablerows $color $somelist )

#foreach( $something in $somelist )

<tr><td bgcolor=$color>$something</td></tr>

<tr><td bgcolor=$color>$bodyContent</td></tr>

#end

#end

</textarea>

<script>

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {

lineNumbers: true,

extraKeys: {"Ctrl-Space": "autocomplete"},

mode: {name: "velocity", globalVars: true},

autoRefresh:true

//hintOptions : {hint: synonyms}

});

// editor.on("keyup", function (cm, event) {

// if (!cm.state.completionActive && /*Enables keyboard navigation in autocomplete list*/

// event.keyCode != 13) { /*Enter - do not open autocomplete list just after item has been selected in it*/

// CodeMirror.commands.autocomplete(cm, null, {completeSingle: false});

// }

// });

</script>