Make your own code blocks with copy button
Here's a summary of the steps:
- Add CSS and JavaScript to your Blogger theme
Go to your Blogger dashboard, click on "Theme," and then click on the three-dot button on the top right corner. Choose "Edit HTML."
Add the following CSS within the <style> section or create a new <style> section within the <head>:
css/* Code block styling */
pre.code-block {
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
overflow-x: auto;
position: relative;
}
/* Copy button styling */
.copy-button {
background-color: #4caf50;
border: none;
border-radius: 2px;
color: white;
cursor: pointer;
font-size: 12px;
padding: 4px 8px;
position: absolute;
top: 10px;
right: 10px;
}
Then, add the following JavaScript code before the closing </body> tag:
html<script>
document.addEventListener("DOMContentLoaded", function() {
var codeBlocks = document.querySelectorAll("pre.code-block");
codeBlocks.forEach(function(block) {
var copyButton = document.createElement("button");
copyButton.innerHTML = "Copy";
copyButton.className = "copy-button";
copyButton.onclick = function() {
var codeText = block.querySelector("code").innerText;
var textarea = document.createElement("textarea");
textarea.value = codeText;
document.body.appendChild(textarea);
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
copyButton.innerHTML = "Copied!";
setTimeout(function() {
copyButton.innerHTML = "Copy";
}, 2000);
};
block.appendChild(copyButton);
});
});
</script>
- Insert code blocks in your Blogger post
Now, you can insert code blocks in your Blogger post using the following format:
php<pre class="code-block">
<code>
// Your C# code here
</code>
</pre>
For example, if you want to add a C# code block:
arduino<pre class="code-block">
<code>
using System;
class Program {
static void Main() {
Console.WriteLine("Hello, World!");
}
}
</code>
</pre>
When you publish your blog post, it will display the formatted code block with a "Copy" button. Once clicked, the button will change to "Copied!" for two seconds and then revert back to "Copy."
Remember to replace the sample C# code with the code you want to include in your blog post.
Comments
Post a Comment