Skip to content

Instantly share code, notes, and snippets.

@karkranikhil
Created July 7, 2019 07:24
Show Gist options
  • Select an option

  • Save karkranikhil/1ff0ada8b8a3ecc8dc02037392733048 to your computer and use it in GitHub Desktop.

Select an option

Save karkranikhil/1ff0ada8b8a3ecc8dc02037392733048 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<style>
pre{
background: #001628;
hyphens: none;
position: relative;
line-height: 28px;
border-radius: 8px;
min-width: 100px;
max-width: 100%;
overflow: hidden;
color: burlywood;
}
pre code {
font-size: 16px;
line-height: 1.75;
background: 0 0;
padding: 0 30px;
white-space: pre;
-webkit-overflow-scrolling: touch;
display: block;
overflow-x: scroll;
max-width: 100%;
min-width: 100px;
tab-size: 2;
hyphens: none;
}
pre[rel]::before {
font-family: Rubik,Lato,"Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif;
font-weight: 700;
font-size: 12px;
content: attr(rel);
color: #03a9f4;
position: absolute;
top: .33rem;
left: .52rem;
width: 100%;
padding: 0;
}
.copy-text{
display: inline-block;
right: 15px;
position: absolute;
top: 5px;
}
textarea{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
</style>
<body>
<pre rel="javascript">
<div class="copy-text" onclick="myFunction(event)">Copy</div>
<code id="myInput">
mydiv = document.getElementById('empty-me');
while (mydiv.firstChild) {
mydiv.removeChild(mydiv.firstChild);
}
</code>
</pre>
<div>hey</div>
<script>
function myFunction() {
const copyText = document.getElementById("myInput").textContent;
const textArea = document.createElement('textarea');
textArea.textContent = copyText;
document.body.append(textArea);
textArea.select();
document.execCommand("copy");
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment