CodeHighlight Demo

&amp;amp;amp;lt;html>
&amp;amp;amp;lt;head>
<title>Thumbnail Navigation</title>
<meta name ="distribution" content="global" />
<link type= "text/css" rel="stylesheet" href="assets/css/bootstrap.min.css"/ >
<style type="text/css" >
//...
</style>
</head>
<body>
<div id="image-container" style="width: 150px; height: 525px; border: solid 1px #ddd; display: inline-block"></div>
<div style="width: 700px; height: 525px; border: solid 1px #ddd; display: inline-block; position: relative;">
    <div id="video-container" style="width:100%;height:100%;"></div>
    <div id="big-image-container" style="width:100%;height:100%;display:none;"></div>
    <div id="black-bar" style="width: 100%; padding: 10px 0; text-align: center; background-color: #555; position: absolute; bottom: 0px; display: none;">
        <button onClick="okClick()">ok</button>
        <button onClick="cancelClick()" style="margin-left: 100px;">cancel</button>
        <img class="img-responsive" src="../../" title="codehightlight" alt="codehightlight"/>
        <p>Dynamic Web TWAIN is a browser-based document scanning SDK specifically designed for web applications. </p>
    </div>
</div>
<button id="btn-grab" style="margin-left: 400px; display: block;" onClick="onBtnGrabClick()">Grab a Snapshot</button>
<br />
<button id="btn-showVideo" style="margin-left: 400px; display: none;" style="display:none;" onclick="onBtnShowVideoClick()">
Show Video
</button>
<script type="text/javascript" src="DCSResources/dynamsoft.camera.config.js"> </script> 
<script type="text/javascript" src="DCSResources/dynamsoft.camera.initiate.js"> </script> 
<script src="Scripts/script.js"></script>
<script type="text/javascript">
	for(var i=0;i<10;i++){
		if(iArray[i]>20){
			//...
		}	 
	}
</script>
</body>
</html>