To create a code box in HTML,like this 👇
you can use the <code> and <pre> tags as follows:
<pre><code> // Your code goes here </code></pre>
You can replace "// Your code goes here" with your actual code, and the <pre> and <code> tags will display it in a monospaced font with preserved whitespace and line breaks.
You can also add a class to the <pre> tag to apply custom styles:
<pre class="code-box"><code> // Your code goes here </code></pre>
Then, you can define the styles for the "code-box" class in your CSS file:
.code-box {
background-color: #f8f8f8;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
This will create a code box with a light gray background, padding, border, and rounded corners. You can adjust the styles as needed to fit your design.
you can add a copy button to your code box using JavaScript. Here's an example of how you can do it:
<div class="code-box"> <button class="copy-btn" onclick="copyCode()">Copy</button> <pre><code>// Your code goes here</code></pre> </div>
In this example, we added a button with the class "copy-btn" and an onclick event that calls the "copyCode()" function. We also wrapped the code block in a div with the class "code-box".
Next, you can add the following JavaScript code to your HTML file or a separate JavaScript file:
function copyCode() {
const code = document.querySelector('.code-box code');
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(code);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
selection.removeAllRanges();
alert('Code copied to clipboard!');
}
This function uses the document.execCommand() method to copy the contents of the code block to the clipboard when the button is clicked. It also displays an alert to let the user know that the code has been copied.
Finally, you can add some CSS to style the copy button:
.copy-btn {
background-color: #4caf50;
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
margin-bottom: 10px;
}
This will create a green button with rounded corners and no border. You can adjust the styles as needed to fit your design.
There are only html code without any code 👇👇👇👇👇
<!DOCTYPE html>
<html>
<head>
<style>
.code-box {
background-color: #f8f8f8;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
position: relative;
}
.copy-btn {
background-color: #4caf50;
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
}
</style>
</head>
<body>
<div class="code-box">
<button class="copy-btn" onclick="copyCode()">Copy</button>
<pre><code>// Your code goes here</code></pre>
</div>
<script>
function copyCode() {
const code = document.querySelector('.code-box code');
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(code);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand('copy');
selection.removeAllRanges();
alert('Code copied to clipboard!');
}
</script>
</body>
</html>
This code creates a code box with a copy button. When the button is clicked, the code is copied to the clipboard and an alert is displayed. You can replace the placeholder code with your actual code.
Note that the CSS styles are included in the head of the HTML document, but you can also move them to a separate CSS file if you prefer.
