Simple CodeMirror Sample

index.html

<div class="tabs-container">
  <ul class="tabs">
    <li class="tab active" data-tab="0">One</li>
    <li class="tab" data-tab="1">Two</li>
  </ul>
  <div class="tab-pane active" data-pane="0">
    <textarea class="editor">// here is the first one
var editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
    mode: "javascript",
    lineNumbers: true,
});
editor.save()</textarea>
  </div>
  <div class="tab-pane" data-pane="1">
    <textarea class="editor">// here is the second one
var editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
    mode: "javascript",
    lineNumbers: true,
});
editor.save()</textarea>
  </div>
</div>

script.js

var editors = document.getElementsByClassName('editor');
for (var i = 0; i < editors.length; i++) {
  var self = editors[i];
  var editor = CodeMirror.fromTextArea(self, {
    mode: "javascript",
    lineNumbers: true,
    autoRefresh: true
  });
  editor.save();
}

var tabs = document.querySelectorAll('.tab');

for (var i = 0; i < tabs.length; i++) {
  var self = tabs[i];
  self.addEventListener('click', function() {
    var data = this.getAttribute('data-tab');
    document.querySelectorAll('.tab-pane.active')[0].classList.remove('active');
    document.querySelectorAll('.tab-pane[data-pane="'+data+'"]')[0].classList.add('active');
    document.querySelectorAll('.tab.active')[0].classList.remove('active');
    this.classList.add('active');
  });
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/codemirror.js"></script>
<script src="https://codemirror.net/mode/javascript/javascript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.54.0/addon/display/autorefresh.min.js"></script>

simple-codemirror-sample.markdown

Simple CodeMirror Sample

A Pen by Ariel Balter on CodePen.

License.

style.css

.tabs {
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin-bottom: -1px;
}
.tab {
  padding: 5px 10px;
  background: #ddd;
  border: 1px solid #bbb;
  width: fit-content;
  display: inline-block;
}
.tab.active {
  background: #fff;
  border-bottom-color: white !important;
}

.tab-pane {
  display: none;
  border: 1px solid #bbb;
}
.tab-pane.active { 
  display: block;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/codemirror.css" rel="stylesheet" />
<link href="https://codepen.io/Souleste/pen/RXebxO.css" rel="stylesheet" />