silva
/
new_site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implemented copy code button feature (#1267) 

Implemented support for copy code button in code blocks (#1262), also updated blog post about code to reflect it.
This commit is contained in:
George 2023-03-19 18:17:34 -03:00 committed by GitHub
parent fa9e1c30c1
commit bacddc7821
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 286 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_includes/scripts/misc.html
View File

@ -12,3 +12,4 @@
<!-- Load Common JS --> <!-- Load Common JS -->
<script defer src="{{ '/assets/js/common.js' | relative_url }}"></script> <script defer src="{{ '/assets/js/common.js' | relative_url }}"></script>
<script defer src="{{ '/assets/js/copy_code.js' | relative_url }}" type="text/javascript"></script>

32
_posts/2015-07-15-code.md
View File

@ -9,7 +9,37 @@ categories: sample-posts
This theme implements a built-in Jekyll feature, the use of Rouge, for syntax highlighting. This theme implements a built-in Jekyll feature, the use of Rouge, for syntax highlighting.
It supports more than 100 languages. It supports more than 100 languages.
This example is in C++. This example is in C++.
All you have to do is wrap your code in a liquid tag: All you have to do is wrap your code in markdown code tags:
````markdown
```c++
code code code
```
````
```c++
int main(int argc, char const \*argv[])
{
string myString;
cout << "input a string: ";
getline(cin, myString);
int length = myString.length();
char charArray = new char * [length];
charArray = myString;
for(int i = 0; i < length; ++i){
cout << charArray[i] << " ";
}
return 0;
}
```
By default, it does not display line numbers. If you want to display line numbers for every code block, you can set `kramdown.syntax_highlighter_opts.block.line_numbers` to true in your `_config.yml` file.
If you want to display line numbers for a specific code block, all you have to do is wrap your code in a liquid tag:
{% raw %} {% raw %}
{% highlight c++ linenos %} <br/> code code code <br/> {% endhighlight %} {% highlight c++ linenos %} <br/> code code code <br/> {% endhighlight %}

304
_sass/_base.scss
View File

@ -4,7 +4,18 @@
// Typography // Typography
p, h1, h2, h3, h4, h5, h6, em, div, li, span, strong { p,
h1,
h2,
h3,
h4,
h5,
h6,
em,
div,
li,
span,
strong {
color: var(--global-text-color); color: var(--global-text-color);
} }
@ -13,26 +24,33 @@ hr {
} }
table { table {
td, th {
td,
th {
color: var(--global-text-color); color: var(--global-text-color);
} }
td { td {
font-size: 1rem; font-size: 1rem;
} }
} }
a, table.table a { a,
table.table a {
color: var(--global-theme-color); color: var(--global-theme-color);
&:hover { &:hover {
color: var(--global-theme-color); color: var(--global-theme-color);
text-decoration: underline; text-decoration: underline;
} }
&:hover:after :not(.nav-item.dropdown) { &:hover:after :not(.nav-item.dropdown) {
width: 100%; width: 100%;
} }
} }
figure, img { figure,
img {
max-width: 90vw; max-width: 90vw;
} }
@ -86,7 +104,8 @@ blockquote {
// Citation // Citation
.citation, .citation-number { .citation,
.citation-number {
color: var(--global-theme-color); color: var(--global-theme-color);
} }
@ -99,24 +118,30 @@ blockquote {
margin-bottom: 5px; margin-bottom: 5px;
margin-top: 5px; margin-top: 5px;
font-family: monospace; font-family: monospace;
p { p {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
} }
} }
} }
.profile.float-right{
.profile.float-right {
margin-left: 1rem; margin-left: 1rem;
} }
.profile.float-left{
.profile.float-left {
margin-right: 1rem; margin-right: 1rem;
} }
@media (min-width: 576px) { @media (min-width: 576px) {
.profile { .profile {
width: 30%; width: 30%;
.address { .address {
p { display: block; } p {
display: block;
}
} }
} }
} }
@ -124,8 +149,10 @@ blockquote {
.post-description { .post-description {
margin-bottom: 2rem; margin-bottom: 2rem;
font-size: 0.875rem; font-size: 0.875rem;
a { a {
color: inherit; color: inherit;
&:hover { &:hover {
color: var(--global-theme-color); color: var(--global-theme-color);
text-decoration: none; text-decoration: none;
@ -142,58 +169,73 @@ blockquote {
background-color: var(--global-bg-color); background-color: var(--global-bg-color);
opacity: 0.95; opacity: 0.95;
} }
.navbar .dropdown-menu { .navbar .dropdown-menu {
background-color: var(--global-bg-color); background-color: var(--global-bg-color);
border: 1px solid var(--global-divider-color); border: 1px solid var(--global-divider-color);
a:not(.active) { a:not(.active) {
color: var(--global-text-color); color: var(--global-text-color);
} }
a:hover { a:hover {
color: var(--global-hover-color); color: var(--global-hover-color);
} }
.dropdown-divider { .dropdown-divider {
border-top: 1px solid var(--global-divider-color) !important; border-top: 1px solid var(--global-divider-color) !important;
} }
} }
.dropdown-item { .dropdown-item {
color: var(--global-text-color); color: var(--global-text-color);
&:hover {
color: var(--global-hover-color); &:hover {
background-color: var(--global-bg-color); color: var(--global-hover-color);
} background-color: var(--global-bg-color);
}
} }
.navbar.navbar-light { .navbar.navbar-light {
a { a {
&:hover { &:hover {
text-decoration: none; text-decoration: none;
} }
} }
.navbar-brand { .navbar-brand {
color: var(--global-text-color); color: var(--global-text-color);
} }
.navbar-nav .nav-item .nav-link { .navbar-nav .nav-item .nav-link {
color: var(--global-text-color); color: var(--global-text-color);
&:hover { &:hover {
color: var(--global-hover-color); color: var(--global-hover-color);
} }
} }
.navbar-nav .nav-item.active>.nav-link { .navbar-nav .nav-item.active>.nav-link {
background-color: inherit; background-color: inherit;
font-weight: bolder; font-weight: bolder;
color: var(--global-theme-color); color: var(--global-theme-color);
&:hover {
color: var(--global-hover-color); &:hover {
} color: var(--global-hover-color);
}
} }
.navbar-brand.social { .navbar-brand.social {
padding-bottom: 0; padding-bottom: 0;
padding-top: 0; padding-top: 0;
font-size: 1.7rem; font-size: 1.7rem;
a { a {
i::before { i::before {
color: var(--global-text-color); color: var(--global-text-color);
transition-property: all 0.2s ease-in-out; transition-property: all 0.2s ease-in-out;
} }
&:hover { &:hover {
i::before { i::before {
color: var(--global-theme-color); color: var(--global-theme-color);
@ -213,13 +255,16 @@ blockquote {
margin-bottom: 4px; margin-bottom: 4px;
transition: all 0.2s; transition: all 0.2s;
} }
.top-bar { .top-bar {
transform: rotate(45deg); transform: rotate(45deg);
transform-origin: 10% 10%; transform-origin: 10% 10%;
} }
.middle-bar { .middle-bar {
opacity: 0; opacity: 0;
} }
.bottom-bar { .bottom-bar {
transform: rotate(-45deg); transform: rotate(-45deg);
transform-origin: 10% 90%; transform-origin: 10% 90%;
@ -230,9 +275,11 @@ blockquote {
.top-bar { .top-bar {
transform: rotate(0); transform: rotate(0);
} }
.middle-bar { .middle-bar {
opacity: 1; opacity: 1;
} }
.bottom-bar { .bottom-bar {
transform: rotate(0); transform: rotate(0);
} }
@ -243,6 +290,7 @@ blockquote {
border: 0; border: 0;
background-color: inherit; background-color: inherit;
color: var(--global-text-color); color: var(--global-text-color);
&:hover { &:hover {
color: var(--global-hover-color); color: var(--global-hover-color);
} }
@ -252,13 +300,16 @@ blockquote {
.social { .social {
text-align: center; text-align: center;
.contact-icons { .contact-icons {
font-size: 4rem; font-size: 4rem;
a { a {
i::before { i::before {
color: var(--global-text-color); color: var(--global-text-color);
transition-property: all 0.2s ease-in-out; transition-property: all 0.2s ease-in-out;
} }
&:hover { &:hover {
i::before { i::before {
color: var(--global-theme-color); color: var(--global-theme-color);
@ -266,6 +317,7 @@ blockquote {
} }
} }
} }
.contact-note { .contact-note {
font-size: 0.8rem; font-size: 0.8rem;
} }
@ -276,13 +328,16 @@ blockquote {
footer.fixed-bottom { footer.fixed-bottom {
background-color: var(--global-footer-bg-color); background-color: var(--global-footer-bg-color);
font-size: 0.75rem; font-size: 0.75rem;
.container { .container {
color: var(--global-footer-text-color); color: var(--global-footer-text-color);
padding-top: 9px; padding-top: 9px;
padding-bottom: 8px; padding-bottom: 8px;
} }
a { a {
color: var(--global-footer-link-color); color: var(--global-footer-link-color);
&:hover { &:hover {
color: var(--global-theme-color); color: var(--global-theme-color);
text-decoration: none; text-decoration: none;
@ -301,11 +356,11 @@ footer.sticky-bottom {
.cv { .cv {
margin-bottom: 40px; margin-bottom: 40px;
.card { .card {
background-color: var(--global-card-bg-color); background-color: var(--global-card-bg-color);
border: 1px solid var(--global-divider-color); border: 1px solid var(--global-divider-color);
.list-group-item { .list-group-item {
background-color: inherit; background-color: inherit;
border-color: var(--global-divider-color); border-color: var(--global-divider-color);
@ -333,6 +388,7 @@ footer.sticky-bottom {
text-align: center; text-align: center;
padding-top: 2rem; padding-top: 2rem;
padding-bottom: 3rem; padding-bottom: 3rem;
h1 { h1 {
color: var(--global-theme-color); color: var(--global-theme-color);
font-size: 5rem; font-size: 5rem;
@ -348,7 +404,8 @@ footer.sticky-bottom {
justify-content: center; justify-content: center;
display: flow-root; display: flow-root;
p, li { p,
li {
list-style: none; list-style: none;
display: inline-block; display: inline-block;
padding: 1rem 0.5rem; padding: 1rem 0.5rem;
@ -361,25 +418,30 @@ footer.sticky-bottom {
margin: 0; margin: 0;
margin-bottom: 40px; margin-bottom: 40px;
padding: 0; padding: 0;
li { li {
border-bottom: 1px solid var(--global-divider-color); border-bottom: 1px solid var(--global-divider-color);
list-style: none; list-style: none;
padding-top: 2rem; padding-top: 2rem;
padding-bottom: 2rem; padding-bottom: 2rem;
.post-meta { .post-meta {
color: var(--global-text-color-light); color: var(--global-text-color-light);
font-size: 0.875rem; font-size: 0.875rem;
margin-bottom: 0; margin-bottom: 0;
} }
.post-tags { .post-tags {
color: var(--global-text-color-light); color: var(--global-text-color-light);
font-size: 0.875rem; font-size: 0.875rem;
padding-top: 0.25rem; padding-top: 0.25rem;
padding-bottom: 0; padding-bottom: 0;
} }
a { a {
color: var(--global-text-color); color: var(--global-text-color);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: var(--global-theme-color); color: var(--global-theme-color);
} }
@ -391,13 +453,16 @@ footer.sticky-bottom {
.page-item { .page-item {
.page-link { .page-link {
color: var(--global-text-color); color: var(--global-text-color);
&:hover { &:hover {
color: $black-color; color: $black-color;
} }
} }
&.active .page-link { &.active .page-link {
color: $white-color; color: $white-color;
background-color: var(--global-theme-color); background-color: var(--global-theme-color);
&:hover { &:hover {
background-color: var(--global-theme-color); background-color: var(--global-theme-color);
} }
@ -445,7 +510,8 @@ footer.sticky-bottom {
} }
} }
.grid-sizer, .grid-item { .grid-sizer,
.grid-item {
width: 250px; width: 250px;
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -465,6 +531,7 @@ footer.sticky-bottom {
.publications { .publications {
margin-top: 2rem; margin-top: 2rem;
h1 { h1 {
color: var(--global-theme-color); color: var(--global-theme-color);
font-size: 2rem; font-size: 2rem;
@ -472,12 +539,15 @@ footer.sticky-bottom {
margin-top: 1em; margin-top: 1em;
margin-bottom: 1em; margin-bottom: 1em;
} }
h2 { h2 {
margin-bottom: 1rem; margin-bottom: 1rem;
span { span {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
h2.year { h2.year {
color: var(--global-divider-color); color: var(--global-divider-color);
border-top: 1px solid var(--global-divider-color); border-top: 1px solid var(--global-divider-color);
@ -486,6 +556,7 @@ footer.sticky-bottom {
margin-bottom: -2rem; margin-bottom: -2rem;
text-align: right; text-align: right;
} }
ol.bibliography { ol.bibliography {
list-style: none; list-style: none;
padding: 0; padding: 0;
@ -493,56 +564,69 @@ footer.sticky-bottom {
li { li {
margin-bottom: 1rem; margin-bottom: 1rem;
.preview { .preview {
width: 100%; width: 100%;
min-width: 80px; min-width: 80px;
max-width: 200px; max-width: 200px;
} }
.abbr { .abbr {
height: 2rem; height: 2rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
abbr { abbr {
display: inline-block; display: inline-block;
background-color: var(--global-theme-color); background-color: var(--global-theme-color);
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
a { a {
color: white; color: white;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
} }
} }
} }
.award { .award {
color: var(--global-theme-color) !important; color: var(--global-theme-color) !important;
border: 1px solid var(--global-theme-color); border: 1px solid var(--global-theme-color);
} }
} }
.title { .title {
font-weight: bolder; font-weight: bolder;
} }
.author { .author {
a { a {
border-bottom: 1px dashed var(--global-theme-color); border-bottom: 1px dashed var(--global-theme-color);
&:hover { &:hover {
border-bottom-style: solid; border-bottom-style: solid;
text-decoration: none; text-decoration: none;
} }
} }
> em {
>em {
border-bottom: 1px solid; border-bottom: 1px solid;
font-style: normal; font-style: normal;
} }
> span.more-authors {
>span.more-authors {
color: var(--global-text-color-light); color: var(--global-text-color-light);
border-bottom: 1px dashed var(--global-text-color-light); border-bottom: 1px dashed var(--global-text-color-light);
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: var(--global-text-color); color: var(--global-text-color);
border-bottom: 1px dashed var(--global-text-color); border-bottom: 1px dashed var(--global-text-color);
} }
} }
} }
.links { .links {
a.btn { a.btn {
color: var(--global-text-color); color: var(--global-text-color);
@ -551,12 +635,14 @@ footer.sticky-bottom {
padding-right: 1rem; padding-right: 1rem;
padding-top: 0.25rem; padding-top: 0.25rem;
padding-bottom: 0.25rem; padding-bottom: 0.25rem;
&:hover { &:hover {
color: var(--global-theme-color); color: var(--global-theme-color);
border-color: var(--global-theme-color); border-color: var(--global-theme-color);
} }
} }
} }
.badges { .badges {
span { span {
display: inline-block; display: inline-block;
@ -564,11 +650,13 @@ footer.sticky-bottom {
height: 100%; height: 100%;
padding-left: 0.5rem; padding-left: 0.5rem;
vertical-align: middle; vertical-align: middle;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
} }
.hidden { .hidden {
font-size: 0.875rem; font-size: 0.875rem;
max-height: 0px; max-height: 0px;
@ -584,12 +672,14 @@ footer.sticky-bottom {
line-height: 1.4em; line-height: 1.4em;
margin: 10px; margin: 10px;
} }
pre { pre {
font-size: 1em; font-size: 1em;
line-height: 1.4em; line-height: 1.4em;
padding: 10px; padding: 10px;
} }
} }
.hidden.open { .hidden.open {
max-height: 100em; max-height: 100em;
transition-property: 0.15s ease; transition-property: 0.15s ease;
@ -598,9 +688,11 @@ footer.sticky-bottom {
-o-transition: 0.15s ease; -o-transition: 0.15s ease;
transition: all 0.15s ease; transition: all 0.15s ease;
} }
div.abstract.hidden { div.abstract.hidden {
border: dashed 1px var(--global-bg-color); border: dashed 1px var(--global-bg-color);
} }
div.abstract.hidden.open { div.abstract.hidden.open {
border-color: var(--global-text-color); border-color: var(--global-text-color);
} }
@ -618,9 +710,12 @@ pre {
background-color: var(--global-code-bg-color); background-color: var(--global-code-bg-color);
border-radius: 6px; border-radius: 6px;
padding: 6px 12px; padding: 6px 12px;
pre, code {
pre,
code {
background-color: transparent; background-color: transparent;
border-radius: 0; border-radius: 0;
margin-bottom: 0;
padding: 0; padding: 0;
} }
} }
@ -643,26 +738,30 @@ html.transition *:after {
} }
// Extra Markdown style (post Customization) // Extra Markdown style (post Customization)
.post{ .post {
.post-meta{ .post-meta {
color: var(--global-text-color-light); color: var(--global-text-color-light);
font-size: 0.875rem; font-size: 0.875rem;
margin-bottom: 0; margin-bottom: 0;
} }
.post-tags{
.post-tags {
color: var(--global-text-color-light); color: var(--global-text-color-light);
font-size: 0.875rem; font-size: 0.875rem;
padding-top: 0.25rem; padding-top: 0.25rem;
padding-bottom: 1rem; padding-bottom: 1rem;
a { a {
color: var(--global-text-color-light); color: var(--global-text-color-light);
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: var(--global-theme-color); color: var(--global-theme-color);
} }
} }
} }
.post-content{
.post-content {
blockquote { blockquote {
border-left: 5px solid var(--global-theme-color); border-left: 5px solid var(--global-theme-color);
padding: 8px; padding: 8px;
@ -671,56 +770,89 @@ html.transition *:after {
} }
progress { progress {
/* Positioning */ /* Positioning */
position: fixed; position: fixed;
left: 0; left: 0;
top: 56px; top: 56px;
z-index: 10; z-index: 10;
/* Dimensions */ /* Dimensions */
width: 100%; width: 100%;
height: 1px; height: 1px;
/* Reset the appearance */ /* Reset the appearance */
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
/* Get rid of the default border in Firefox/Opera. */ /* Get rid of the default border in Firefox/Opera. */
border: none; border: none;
/* Progress bar container for Firefox/IE10 */ /* Progress bar container for Firefox/IE10 */
background-color: transparent; background-color: transparent;
/* Progress bar value for IE10 */ /* Progress bar value for IE10 */
color: var(--global-theme-color); color: var(--global-theme-color);
} }
progress::-webkit-progress-bar { progress::-webkit-progress-bar {
background-color: transparent; background-color: transparent;
} }
progress::-webkit-progress-value { progress::-webkit-progress-value {
background-color: var(--global-theme-color); background-color: var(--global-theme-color);
} }
progress::-moz-progress-bar { progress::-moz-progress-bar {
background-color: var(--global-theme-color); background-color: var(--global-theme-color);
} }
.progress-container { .progress-container {
width: 100%; width: 100%;
background-color: transparent; background-color: transparent;
position: fixed; position: fixed;
top: 56px; top: 56px;
left: 0; left: 0;
height: 5px; height: 5px;
display: block; display: block;
} }
.progress-bar { .progress-bar {
background-color: var(--global-theme-color); background-color: var(--global-theme-color);
width: 0%; width: 0%;
display: block; display: block;
height: inherit; height: inherit;
} }
pre {
padding: 8px 12px;
position: relative;
/* Copy code to clipboard button */
.copy {
background: var(--global-card-bg-color);
border-color: var(--global-bg-color);
border-radius: .3rem;
border-style: solid;
color: var(--global-text-color);
font-size: medium;
opacity: 0;
position: absolute;
right: .25rem;
top: .25rem;
&:active,
&:focus,
&:hover {
color: var(--global-hover-color);
opacity: 1;
}
}
&:active .copy,
&:focus .copy,
&:hover .copy {
color: var(--global-hover-color);
opacity: 1;
}
}

36
assets/js/copy_code.js Normal file
View File

@ -0,0 +1,36 @@
// create element for copy button in code blocks
var codeBlocks = document.querySelectorAll('pre');
codeBlocks.forEach(function (codeBlock) {
if (codeBlock.querySelector('pre:not(.lineno)') || codeBlock.querySelector('code')) {
var copyButton = document.createElement('button');
copyButton.className = 'copy';
copyButton.type = 'button';
copyButton.ariaLabel = 'Copy code to clipboard';
copyButton.innerText = 'Copy';
copyButton.innerHTML = '<i class="fas fa-clipboard"></i>';
codeBlock.append(copyButton);
// get code from code block and copy to clipboard
copyButton.addEventListener('click', function () {
// check if code block has line numbers
// i.e. `kramdown.syntax_highlighter_opts.block.line_numbers` set to true in _config.yml
// or using `jekyll highlight` liquid tag with `linenos` option
if (codeBlock.querySelector('pre:not(.lineno)')) {
// get code from code block ignoring line numbers
var code = codeBlock.querySelector('pre:not(.lineno)').innerText.trim();
} else { // if (codeBlock.querySelector('code')) {
// get code from code block when line numbers are not displayed
var code = codeBlock.querySelector('code').innerText.trim();
}
window.navigator.clipboard.writeText(code);
copyButton.innerText = 'Copied';
copyButton.innerHTML = '<i class="fas fa-clipboard-check"></i>';
var waitFor = 3000;
setTimeout(function () {
copyButton.innerText = 'Copy';
copyButton.innerHTML = '<i class="fas fa-clipboard"></i>';
}, waitFor);
});
}
});