Codemirror

Codemirror - Demo

HTML

<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<div id="testbox">
    <form>
        <fieldset>
            <div id="QTA1div" class="quad">QTA1
                <textarea id="QTA1" name="QTA1" class="" rows="9">---------------------------------------- TIBCO HEADER ----------------------------------------
-- BOM Name           : XYZInsurancePolicy.bom
-- BOM Namespace      : com.example.xyzinsuranceBDSProject2
-- Namespace Tag      : XYZNSRNCBDSP
-- BOM Major Version  : 1
-- Table Mappings     : (BOM Class -> DB Table)
--    com.example.xyzinsuranceBDSProject2.PolicyDetails  BDS_1_XYZNSRNCBDSP_POLICYDETLS
--    com.example.xyzinsuranceBDSProject2.CarDetails     BDS_1_XYZNSRNCBDSP_CARDETAILS
--    com.example.xyzinsuranceBDSProject2.Incident       BDS_1_XYZNSRNCBDSP_INCIDENT
--    com.example.xyzinsuranceBDSProject2.Person         BDS_1_XYZNSRNCBDSP_PERSON
--    com.example.xyzinsuranceBDSProject2.Witness        BDS_1_XYZNSRNCBDSP_PERSON
--    com.example.xyzinsuranceBDSProject2.ThirdParty     BDS_1_XYZNSRNCBDSP_PERSON
--    com.example.xyzinsuranceBDSProject2.NamedDrivers   BDS_1_XYZNSRNCBDSP_PERSON
--    com.example.xyzinsuranceBDSProject2.PolicyHolder   BDS_1_XYZNSRNCBDSP_PERSON
--    com.example.xyzinsuranceBDSProject2.Incident.contactAndUpdates BDS_1_XYZNSRNCBDSP_NCDNTCNTCTN
--    com.example.xyzinsuranceBDSProject2.IncidentDetails BDS_1_XYZNSRNCBDSP_INCIDNTDTLS
--    com.example.xyzinsuranceBDSProject2.ClaimType.claimType BDS_1_XYZNSRNCBDSP_CLMTYPCLMTY
--    com.example.xyzinsuranceBDSProject2.updateDetails  BDS_1_XYZNSRNCBDSP_UPDATEDETLS
--    com.example.xyzinsuranceBDSProject2.ThirdParty.thirdPartyDocuments BDS_1_XYZNSRNCBDSP_THRDPRTYTHR
--    com.example.xyzinsuranceBDSProject2.IncidentDetails.associatedDocs BDS_1_XYZNSRNCBDSP_NCDNTDTLSSS
--    com.example.xyzinsuranceBDSProject2.Claim         ...

CSS

html, body {
		    box-sizing:border-box;
		    display:inline-block;
		    vertical-align:top;
		    width: 100%;
		    height: 100%;
		    margin: 0px 0px 0px 0px;
		    padding: 0px 0px 0px 0px;
		    background-color: #000061;
		}
		*, *:before, *:after {
		    box-sizing: inherit;
		    vertical-align:top;
		}
		#testbox {
		    background-color: #FFFFFF;
		    color:#000000;
		}
		form {
		    display: inline-block;
		    height:100%;
		    width:100%;
		}
		fieldset {
		    display: inline-block;
		    margin: 0px;
		    padding:0px;
		    width:49.5%;
		    height:100%;
		}
		form div {
		    background-color: #FFFFFF;
		    height:100%;
		}
		.quad {
		    width:100%;
		}
		.shim {
		    border:0px solid grey;
		    display:inline-block;
		    width:100%;
		    height:1%;
		    min-height:15px;
		}
		.shim2 {
		    border:1px solid grey;
		    display:inline-block;
		    height:100%;
		    width:1%;
		    min-height:640px;
		}
		#QTA1, #QTA2, #QTA3, #QTA4 {
		    width:100%;
		    resize: none;
		    border:1px solid blue;
		}
		.CodeMirror {
		    height:auto;
		    margin:0;
		    padding:0;
		    overflow-y: auto;
		    overflow-x: hidden;
		}

JavaScript

var myCodeMirror = CodeMirror.fromTextArea(document.getElementById('QTA1'), {
    mode: "javascript",
    lineNumbers: true
});

    var myCodeMirror2 = CodeMirror.fromTextArea(document.getElementById('QTA2'), {
        mode: "javascript",
    lineNumbers: true
});

var myCodeMirror4 = CodeMirror.fromTextArea(QTA3, {
    mode: "javascript",
    lineNumbers: true
});

var myCodeMirror4 = CodeMirror.fromTextArea(QTA4, {
    mode: "javascript",
    lineNumbers: true
});