Add Copy Button to Code Blocks in Blogspot
Previously we implemented adding highlighting to code blocks.
However, our environment is a bit special — our pre code is generated through JS replacement.
So we need to place the action of adding the copy button after the pre code has been generated.
Anyway, we've already added the JS content into our own code. On one hand, this copy button code shouldn't have any bugs and doesn't need later maintenance or updates. On the other hand, this is a personal project, and who knows if it might disappear someday. So let's not use the link form for the CSS part either.
However, if a line is too long, it ends up looking like this. Using the mouse to drag and select is very inconvenient. It would be great if there were a copy button at this point.
I always thought it was complicated before. Since I have the motivation again today, let's look into it.
After searching around, very many solutions are based on the < pre > < code > structure. I didn't find any based on just the ＜ pre > element.
After another search, it seems the HTML specification recommends using pre code nested together.
So let's switch to wrapping with pre code.
Make a small modification to the blockquote2pre.js file.
Then I found a fairly good copy button solution.
Because in this solution, the copy button doesn't use text or emoji on top, but rather a pattern drawn with CSS. So there won't be any character set issues.
The original solution just needs you to copy the CSS and JS imports directly.
So we need to place the action of adding the copy button after the pre code has been generated.
So we find the content of the JS file and add it to our blockquote2pre.js file. If you don't understand it, that's fine — just copy and paste.
Anyway, we've already added the JS content into our own code. On one hand, this copy button code shouldn't have any bugs and doesn't need later maintenance or updates. On the other hand, this is a personal project, and who knows if it might disappear someday. So let's not use the link form for the CSS part either.
Write the CSS content into the Blogspot template.
Search for "skin" to find the end of the CSS. Add this CSS.
.copy-button {
position: absolute;
display: none;
cursor: pointer;
inset: 5px 5px auto auto;
width: 1em;
height: 1em;
border: 1px solid;
box-shadow: -3px 3px #999
}
:hover>.copy-button {
display: inline-block
}
.copy-success {
box-shadow: none;
background-color: #999;
transition: box-shadow .3s ease-out,background-color .3s ease-out
}
.copy-fail {
border-style: dotted
}
========
End
Github: https://github.com/crazypeace/blogger-replace-blockquote-to-pre/
========
bonus
While browsing this big shot's blog, I found he has another article.
https://yihui.org/en/2023/08/css-scrollbar/
https://yihui.org/en/2023/08/css-scrollbar/
It can make the code block not wrap by default and show a horizontal scrollbar; but when the mouse hovers over it, it wraps and there's no horizontal scrollbar.
Let's just copy it directly.
pre, pre:hover {
white-space: pre-wrap;
word-break: break-all;
}
pre code {
display: block;
overflow-x: auto;
}
@media only screen and (min-width: 992px) {
pre { white-space: pre; }
}
Posts
