$def with (form)

<html lang="en">
<head>

	<meta charset="utf-8">
	<script src="/static/CodeMirror/lib/codemirror.js"></script>
	<link rel="stylesheet" href="/static/CodeMirror/lib/codemirror.css">
	<script src="/static/CodeMirror/mode/clike/clike.js"></script>
	<title>Chips Web Demo - Generate Verilog from C</title>
	<style>

		body {
		  background-color: #ffffff;
		  font-family: "sans-serif";
		  font-weight: 300;
		  font-size: 16px;
		  color: #007a7c;

		  -webkit-font-smoothing: antialiased;
		  -webkit-overflow-scrolling: touch;
		    
		  margin-top: 70px;
		}

		/* Titles */
		h1, h2, h3, h4, h5, h6 {
		  font-family: "sans-serif";
		  font-weight: 300;
		  color: #007a7c;
		}


		/* Paragraph & Typographic */
		p {
		  line-height: 28px;
		  margin-bottom: 25px;
		}

		.centered {
		  text-align: center;
		}

		.mt {
		  margin-top: 40px;
		}

		.footer {
		  text-align: center;
		}

		.btn {
		  background: #ffffff;
		  border-style: solid;
		  border-width: small;
		  border-radius: 5px;
		  border-color: #007a7c;
		  font-family: "sans-serif";
		  color: #007a7c;
		  font-size: 18px;
		  text-decoration: none;
	          text-align: center;
		}

		.CodeMirror {
		  /* Set height, width, borders, and global font properties here */
		  font-family: monospace;
		  border-style: solid;
		  border-width: small;
		  border-radius: 5px;
		  border-color: #007a7c;
		  height: 60%;
		  width: 90%;
		  color: black;
		}

		/* Links */
		a {
		    color: #505050;
		    word-wrap: break-word;
		    margin: 10px;

		    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
		    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
		    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
		    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
		    transition: color 0.1s ease-in, background 0.1s ease-in;
		}

		a:hover,
		a:focus {
		    color: #7b7b7b;
		    text-decoration: none;
		    outline: 0;
		}

		a:before,
		a:after {
		    -webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
		    -moz-transition: color 0.1s ease-in, background 0.1s ease-in;
		    -ms-transition: color 0.1s ease-in, background 0.1s ease-in;
		    -o-transition: color 0.1s ease-in, background 0.1s ease-in;
		    transition: color 0.1s ease-in, background 0.1s ease-in;
		}
	</style>
	<script>

		function update_form(){
			document.main_form.action="/";
			document.main_form.method="post";
			document.main_form.submit();
			return true;
		}

		function generate_code(){
			document.main_form.target="_blank";
			document.main_form.action="main.v";
			document.main_form.method="post";
			document.main_form.submit();
			return true;
		}

	</script>
</head>

<div style="display:flex; justify-content:center;">
	<h1> Chips-2.0 - Generate Hardware with C </h1>
</div>
<form name="main_form"> 
	<div style="display:flex; justify-content:center; padding:10px">
		$:form["Examples"].render()
	</div>
	<div style="display:flex; justify-content:center;">
		<textarea id="c" name="C" class="txtarea" rows=20 cols=100>$form["C"].value</textarea>
	</div>
	<div style="display:flex; justify-content:center; padding:10px">
		<input class="btn" value="Generate Verilog" onclick="return generate_code();"> </input>
	</div>
</form>

<script>

	var editor = CodeMirror.fromTextArea(document.getElementById("c"), {
	    lineNumbers: true,
	    mode: "text/x-csrc",
	    matchBrackets: true
	});

</script>
<div class="footer">
<a href="http://pyandchips.org"> chips - find out more... </a>
<a href="https://github.com/dawsonjon/Chips-2.0"> github </a>
<a href="/static/chips_lib.v"> support library </a>                                                                                         
</div>
