Code Mirror

 Here is the trick to use code mirror by class name using jquery

Step 1: Add Require CSS & JS in Head or bottom

<script src="https://www.gdatamart.com/js/jquery-1.10.2.min.js"></script>

<link href="https://www.gdatamart.com/cdm/theme/eclipse.css" rel="stylesheet" />

<link href="https://www.gdatamart.com/cdm/theme/darcula.css" rel="stylesheet" />

<style>

      .CodeMirror {border: 1px solid black; font-size:13px;height:auto}

    </style>

Step 2: HTML Code

<textarea class="myCodeArea"></textarea>

<p>bdsfbfjdfberjejk dfferfere fgbjgkjrtrrrrrrrrrrrrrrrrrrrrrrr dfjgvrkjgbrt dfgrtgrk  </p>

<p>bdsfbfjdfberjejk dfferfere fgbjgkjrtrrrrrrrrrrrrrrrrrrrrrrr dfjgvrkjgbrt dfgrtgrk  </p>

<p>bdsfbfjdfberjejk dfferfere fgbjgkjrtrrrrrrrrrrrrrrrrrrrrrrr dfjgvrkjgbrt dfgrtgrk  </p>

<p>bdsfbfjdfberjejk dfferfere fgbjgkjrtrrrrrrrrrrrrrrrrrrrrrrr dfjgvrkjgbrt dfgrtgrk  </p>

<textarea class="myCodeArea"></textarea>

<p>bdsfbfjdfberjejk dfferfere fgbjgkjrtrrrrrrrrrrrrrrrrrrrrrrr dfjgvrkjgbrt dfgrtgrk  </p>

<p>bdsfbfjdfberjejk dfferfere fgbjgkjrtrrrrrrrrrrrrrrrrrrrrrrr dfjgvrkjgbrt dfgrtgrk  </p>

<p>bdsfbfjdfberjejk dfferfere fgbjgkjrtrrrrrrrrrrrrrrrrrrrrrrr dfjgvrkjgbrt dfgrtgrk  </p>

<p>bdsfbfjdfberjejk dfferfere fgbjgkjrtrrrrrrrrrrrrrrrrrrrrrrr dfjgvrkjgbrt dfgrtgrk  </p>

<textarea class="myCodeArea"></textarea>

Step 3: Call CodeMirror by Class

<script>

        $('.myCodeArea').each(function (index, elem) {

            CodeMirror.fromTextArea(elem, {

                lineNumbers: true,

                mode: "javascript",

                theme: "eclipse"

                //    readOnly: true

            });

        });

</script>

Extra Points:-

You can add Theme and Mode in To change look & Feel

Theme Example:-

<link href="https://www.gdatamart.com/cdm/theme/eclipse.css" rel="stylesheet" />

<link href="https://www.gdatamart.com/cdm/theme/darcula.css" rel="stylesheet" />

Mode Example:-

<script src="https://www.gdatamart.com/cdm/addon/selection/active-line.js"></script>

<script src="https://www.gdatamart.com/cdm/addon/edit/matchbrackets.js"></script>

<script src="https://www.gdatamart.com/cdm/mode/javascript/javascript.js"></script>