Skip to content

Instantly share code, notes, and snippets.

@abalter

abalter/simple-codepen-example.html

Created November 3, 2022 05:30
Show Gist options
  • Save abalter/23f3e66f5e6a0ef7b0e5d9c13adae220 to your computer and use it in GitHub Desktop.
Save abalter/23f3e66f5e6a0ef7b0e5d9c13adae220 to your computer and use it in GitHub Desktop.
Download ZIP
Simple two-tab codepen example in a single html file. Based on https://codepen.io/Souleste/pen/xxwvVva
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment