About This Code
The Responsive Custom Code Editor is created using HTML, CSS, and JAVASCRIPT by the Coding Vlogs YouTube channel. you can download the source code or copy the source code and use it for frif you haven't subscribed to our YouTube channel, please do so now since we are creating a beautiful coding project and providing the source code for free. For Download Source Code Scroll Down ↓
How It Created —
This project has been created with a basic understanding of HTML, CSS, and JavaScript. For this project, we are going to be using Clipboard.js for capturing code and prettifying the code so that this sample code can be highlighted. If you are a blogger or a site owner, you can use our code in employment on your blog or on your site. Despite the complexity of the code, it is easy to understand. In the right top corner of the page, you will find a table that allows you to skip to any part you wish
HTML
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Coding Vlogs</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<pre><code><!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Coding Vlogs</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<pre><code>Coding Vlogs</code></pre>
<script src='https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js'></script>
<script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sunburst'></script><script src="./script.js"></script>
</body>
</html></code></pre>
<script src='https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js'></script>
<script src='https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sunburst'></script><script src="./script.js"></script>
</body>
</html>
Style (CSS)
.copy-code-button {
border-radius: 0;
min-height: 20px;
min-width: 15px;
background: none repeat scroll 0 0 transparent;
background-color: transparent;
color: #F1F2F3 !important;
cursor: pointer;
border-style: none;
font-family: 'HELVETICA',sans-serif;
font-size: 0.8em;
font-weight: normal;
text-align: center;
text-decoration: none;
text-indent: 0;
text-transform: uppercase;
font-weight: 500;
line-height: 1.42rem;
margin: 0;
padding: 3px 8px;
position: absolute !important;
top: 0 !important;
right: 0 !important;
}
.copy-code-button > span {
color: #F1F2F3 !important;
}
.copy-code-button, ::before, ::after {
box-sizing: inherit;
}
.copy-code-button::before {
content: '';
display: inline-block;
width: 19px;
height: 19px;
margin-right: 3px;
background-size: contain;
background-image: url("https://cdn.codingvlogs.com/media/copy_icon.svg");
background-repeat: no-repeat;
position: relative;
top: 3px;
}
.copy-code-button:focus {
outline: 0;
}
/* pre {
color: #FFF;
background-color: #000;
border-radius: 0px !important;
} */
pre[class*="prettyprint"] {
-moz-hyphens: none;
hyphens: none;
position: relative;
overflow: hidden;
}
ol.linenums {
padding: 0;
list-style-position: inside;
overflow: auto;
}
JavaScript
document.querySelectorAll('pre').forEach(function (codeBlock) {
var button = document.createElement('button');
button.className = 'copy-code-button';
button.type = 'button';
var s = codeBlock.innerText;
button.setAttribute('data-clipboard-text',s);
button.innerText = '';
button.setAttribute('title', ' para a área de transferência');
var pre = codeBlock.parentNode;
codeBlock.classList.add('prettyprint');
pre.parentNode.insertBefore(button, pre);
codeBlock.appendChild(button);
});
var clipboard = new ClipboardJS('.copy-code-button');
clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.trigger.textContent = '';
window.setTimeout(function() {
e.trigger.textContent = '';
}, 2000);
e.clearSelection();
});
clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
e.trigger.textContent = 'Erro ao ';
window.setTimeout(function() {
e.trigger.textContent = '';
}, 2000);
e.clearSelection();
});