abalter/simple-codepen-example.html

## simple-codepen-example.html
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Simple CodeMirror Sample</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/codemirror.css'>
  <style>
    .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;
    }
  </style>
<link rel='stylesheet' href='https://codepen.io/Souleste/pen/RXebxO.css'>

</head>
<body>
<!-- partial:index.partial.html -->
<div>
  This is based on a <a href="https://codepen.io/Souleste/pen/xxwvVva">codepen example.</a>
</div>
<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>
<!-- partial -->
<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>
<script>
  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');
    });
  }
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en" >
	<head>
	<meta charset="UTF-8">
	<title>CodePen - Simple CodeMirror Sample</title>
	<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/codemirror.css'>
	<style>
	.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;
	}
	</style>
	<link rel='stylesheet' href='https://codepen.io/Souleste/pen/RXebxO.css'>

	</head>
	<body>
	<!-- partial:index.partial.html -->
	<div>
	This is based on a <a href="https://codepen.io/Souleste/pen/xxwvVva">codepen example.</a>
	</div>
	<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>
	<!-- partial -->
	<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>
	<script>
	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');
	});
	}
	</script>
	</body>
	</html>