Skip to content

Add copy code-block plugin - #1043

Merged
marvinchin merged 10 commits into
MarkBind:masterfrom
yash-chowdhary:copy-code
Mar 4, 2020
Merged

Add copy code-block plugin#1043
marvinchin merged 10 commits into
MarkBind:masterfrom
yash-chowdhary:copy-code

Conversation

@yash-chowdhary

@yash-chowdharyyash-chowdhary commented Feb 15, 2020•
edited
Loading

Copy link
Copy Markdown
Contributor

What is the purpose of this pull request? (put "X" next to an item, remove the rest)

• [x] New feature

Closes#562

What is the rationale for this request?
Lets users copy code in a given code block.
Since one of MarkBind's major use cases is project documentation, copying code blocks would be very beneficial to users.

What changes did you make? (Give an overview)

Demo

ezgif com-video-to-gif-2

Is there anything you'd like reviewers to focus on?
N/A

Testing instructions:

  • Since this is a plugin, add the following to site.json : 
    ..."plugins": [
"codeBlockCopyButtons"
]
...

Proposed commit message: (wrap lines at 72 characters)
Add copy code-block plugin

@yash-chowdhary
yash-chowdhary marked this pull request as ready for review February 15, 2020 15:21
@openorclose

openorclose commented Feb 15, 2020

Copy link
Copy Markdown
Contributor

What's the reason to use clipboard.js, a rather large file, over a shorter code snippet?

Is it for browser compatibility?

@yash-chowdhary

yash-chowdhary commented Feb 15, 2020

Copy link
Copy Markdown
ContributorAuthor

In part, yes. I was also facing some difficulty in using document.execCommand("copy") as it requires the id of the element and our <pre> elements don't have ids.

@openorclose

openorclose commented Feb 16, 2020

Copy link
Copy Markdown
Contributor

In part, yes. I was also facing some difficulty in using document.execCommand("copy") as it requires the id of the element and our <pre> elements don't have ids.

The button is located inside the <pre> element, so you should be able to access it with event.target.parentElement.

@yash-chowdhary

yash-chowdhary commented Feb 16, 2020•
edited
Loading

Copy link
Copy Markdown
ContributorAuthor

I've removed the dependency on clipboard.js.
Updated the PR description accordingly.
Ready for review.

marvinchin
marvinchin requested changes Feb 17, 2020
View reviewed changes

@marvinchinmarvinchin left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for looking at this - I have a couple of questions 🙂

Comment threadsrc/constants.js Outdated
Comment threaddocs/userGuide/plugins/copyCode.mbdf Outdated
Comment threadasset/css/markbind.css Outdated
Comment threadasset/css/markbind.css Outdated
Comment threadsrc/plugins/copyCode.js Outdated
Comment threadsrc/plugins/copyCode.js Outdated
Comment threadsrc/plugins/copyCode.js Outdated
Comment threadsrc/plugins/copyCode.js Outdated
Comment threadsrc/plugins/copyCode.js Outdated
Comment threadsrc/plugins/copyCode.js Outdated
openorclose
openorclose reviewed Feb 17, 2020
View reviewed changes
Comment threadsrc/plugins/codeBlockCopyButtons.js Outdated
openorclose
openorclose reviewed Feb 17, 2020
View reviewed changes
Comment threadsrc/plugins/codeBlockCopyButtons.js Outdated
openorclose
openorclose reviewed Feb 17, 2020
View reviewed changes
Comment threadsrc/plugins/codeBlockCopyButtons.js Outdated
marvinchin
marvinchin reviewed Feb 21, 2020
View reviewed changes

@marvinchinmarvinchin left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just one last question :)

Comment threadasset/css/markbind.css Outdated
@yash-chowdhary

yash-chowdhary commented Feb 25, 2020•
edited
Loading

Copy link
Copy Markdown
ContributorAuthor

Rebased on master. Ready for review

marvinchin
marvinchin approved these changes Feb 25, 2020
View reviewed changes

@marvinchinmarvinchin left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM :)

Just a follow-up thought: It feels kinda odd that we add plugin styles to the main markbind.css file. Perhaps we should come up with a better way for plugin writers to keep assets contained within the plugin folder itself.

marvinchin
marvinchin reviewed Feb 26, 2020
View reviewed changes

@marvinchinmarvinchin left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@yash-chowdhary seems like the version change wasn't caused by changes made this PR, so let's fix it in another one. I believe #1055 should fix it - let's drop that change here and rebase it on top of that instead.

@marvinchinmarvinchin added this to the v2.11.1 milestone Feb 27, 2020
@yash-chowdhary

yash-chowdhary commented Mar 3, 2020

Copy link
Copy Markdown
ContributorAuthor

Rebased on master. Resolved conflicts.

@marvinchin
marvinchin merged commit b8413c6 into MarkBind:masterMar 4, 2020
@yamgentyamgent added the pr.NewFeature 🆕 Enable users (authors/readers) to do something new label Mar 7, 2020
Tejas2805 added a commit to Tejas2805/markbind that referenced this pull request Mar 7, 2020
@Tejas2805
Merge branch 'master' ofhttps://github.com/MarkBind/markbindinto co…
a5c6f32
…nvert-to-code-block
* 'master' of https://github.com/MarkBind/markbind:
Allow changing parameter properties (MarkBind#1075)
Custom timezone for built-in timestamp (MarkBind#1073)
Fix reload inconsistency when updating frontmatter (MarkBind#1068)
Implement an api to ignore content in certain tags (MarkBind#1047)
Enable AppVeyor CI (MarkBind#1040)
Add heading and line highlighting to code blocks (MarkBind#1034)
Add dividers and fix bug in siteNav (MarkBind#1063)
Fixed navbar no longer covers modals (MarkBind#1070)
Add copy code-block plugin (MarkBind#1043)
Render plugins on dynamic resources (MarkBind#1051)
Documentation for Implement no-* attributes for <box> (MarkBind#1042)
Migrate to bootstrap-vue popovers (MarkBind#1033)
Refactor preprocess and url processing functions (MarkBind#1026)
Add pageNav to Using Plugins Page (MarkBind#1062)
# Conflicts:
#	docs/userGuide/syntax/siteNavigationMenus.mbdf
Tejas2805 added a commit to Tejas2805/markbind that referenced this pull request Mar 9, 2020
@Tejas2805
Merge branch 'master' ofhttps://github.com/MarkBind/markbind
31d0325
* 'master' of https://github.com/MarkBind/markbind:
2.12.0
Update outdated test files
Update vue-strap version to v2.0.1-markbind.37
Fix refactor to processDynamicResources (MarkBind#1092)
Implement lazy page building for markbind serve (MarkBind#1038)
Add warnings for conflicting/deprecated component attribs (MarkBind#1057)
Allow changing parameter properties (MarkBind#1075)
Custom timezone for built-in timestamp (MarkBind#1073)
Fix reload inconsistency when updating frontmatter (MarkBind#1068)
Implement an api to ignore content in certain tags (MarkBind#1047)
Enable AppVeyor CI (MarkBind#1040)
Add heading and line highlighting to code blocks (MarkBind#1034)
Add dividers and fix bug in siteNav (MarkBind#1063)
Fixed navbar no longer covers modals (MarkBind#1070)
Add copy code-block plugin (MarkBind#1043)
Render plugins on dynamic resources (MarkBind#1051)
Documentation for Implement no-* attributes for <box> (MarkBind#1042)
Migrate to bootstrap-vue popovers (MarkBind#1033)
Refactor preprocess and url processing functions (MarkBind#1026)
Add pageNav to Using Plugins Page (MarkBind#1062)
marvinchin pushed a commit that referenced this pull request Apr 10, 2020
@yash-chowdharyMarvin Chin
Add copy code-block plugin (#1043)
ddaa948
This was referenced Mar 7, 2025
Closed
Merged
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@openorcloseopenorcloseopenorclose left review comments
@marvinchinmarvinchinmarvinchin approved these changes
@yamgentyamgentAwaiting requested review from yamgent

Assignees

No one assigned

Labels

pr.NewFeature 🆕Enable users (authors/readers) to do something new

Projects

None yet

Milestone

v2.12.0

Development

Successfully merging this pull request may close these issues.

Give a copy button in code blocks

4 participants

@yash-chowdhary@openorclose@marvinchin@yamgent
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Add copy code-block plugin by yash-chowdhary · Pull Request #1043 · MarkBind/markbind · GitHub
Skip to content
Add copy code-block plugin - #1043
Merged
marvinchin merged 10 commits into
MarkBind:masterfrom 
yash-chowdhary:copy-code
Mar 4, 2020
Merged
Add copy code-block plugin#1043
marvinchin merged 10 commits into
MarkBind:masterfrom 
yash-chowdhary:copy-code
Conversation
@yash-chowdhary
@yash-chowdharyyash-chowdhary
commented
Feb 15, 2020•

edited

Loading

Copy link


Copy Markdown

Contributor
What is the purpose of this pull request? (put "X" next to an item, remove the rest)
• [x] New feature
Closes#562
What is the rationale for this request?

Lets users copy code in a given code block.

Since one of MarkBind's major use cases is project documentation, copying code blocks would be very beneficial to users.
What changes did you make? (Give an overview)
Demo
ezgif com-video-to-gif-2
Is there anything you'd like reviewers to focus on?

N/A
Testing instructions:
  • Since this is a plugin, add the following to site.json :

    ..."plugins": [
"codeBlockCopyButtons"
]
...
Proposed commit message: (wrap lines at 72 characters)

Add copy code-block plugin
@yash-chowdhary
yash-chowdhary
marked this pull request as ready for review
February 15, 2020 15:21
@openorclose
openorclose
commented
Feb 15, 2020

Copy link


Copy Markdown

Contributor
What's the reason to use clipboard.js, a rather large file, over a shorter code snippet?
Is it for browser compatibility?
@yash-chowdhary
yash-chowdhary
commented
Feb 15, 2020

Copy link


Copy Markdown

ContributorAuthor
In part, yes. I was also facing some difficulty in using document.execCommand("copy") as it requires the id of the element and our <pre> elements don't have ids.
@openorclose
openorclose
commented
Feb 16, 2020

Copy link


Copy Markdown

Contributor
In part, yes. I was also facing some difficulty in using document.execCommand("copy") as it requires the id of the element and our <pre> elements don't have ids.
The button is located inside the <pre> element, so you should be able to access it with event.target.parentElement.
@yash-chowdhary
yash-chowdhary
commented
Feb 16, 2020•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
I've removed the dependency on clipboard.js.

Updated the PR description accordingly.

Ready for review.
marvinchin
marvinchin
requested changes
Feb 17, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for looking at this - I have a couple of questions 🙂
Comment threadsrc/constants.js
Outdated

Comment threaddocs/userGuide/plugins/copyCode.mbdf
Outdated

Comment threadasset/css/markbind.css
Outdated

Comment threadasset/css/markbind.css
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

openorclose
openorclose
reviewed
Feb 17, 2020
View reviewed changes
Comment threadsrc/plugins/codeBlockCopyButtons.js
Outdated

openorclose
openorclose
reviewed
Feb 17, 2020
View reviewed changes
Comment threadsrc/plugins/codeBlockCopyButtons.js
Outdated

openorclose
openorclose
reviewed
Feb 17, 2020
View reviewed changes
Comment threadsrc/plugins/codeBlockCopyButtons.js
Outdated

marvinchin
marvinchin
reviewed
Feb 21, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just one last question :)
Comment threadasset/css/markbind.css
Outdated

@yash-chowdhary
yash-chowdhary
commented
Feb 25, 2020•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Rebased on master. Ready for review
marvinchin
marvinchin
approved these changes
Feb 25, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM :)
Just a follow-up thought: It feels kinda odd that we add plugin styles to the main markbind.css file. Perhaps we should come up with a better way for plugin writers to keep assets contained within the plugin folder itself.
marvinchin
marvinchin
reviewed
Feb 26, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@yash-chowdhary seems like the version change wasn't caused by changes made this PR, so let's fix it in another one. I believe #1055 should fix it - let's drop that change here and rebase it on top of that instead.
@marvinchinmarvinchin
added this to the v2.11.1 milestone
Feb 27, 2020
@yash-chowdhary
yash-chowdhary
commented
Mar 3, 2020

Copy link


Copy Markdown

ContributorAuthor
Rebased on master. Resolved conflicts.
@marvinchin
marvinchin
merged commit b8413c6
into
MarkBind:masterMar 4, 2020
@yamgentyamgent
added
the 
pr.NewFeature 🆕
Enable users (authors/readers) to do something new
label
Mar 7, 2020
Tejas2805 added a commit
to Tejas2805/markbind
that referenced
this pull request
Mar 7, 2020
@Tejas2805
Merge branch 'master' ofhttps://github.com/MarkBind/markbindinto co…
a5c6f32
…nvert-to-code-block
* 'master' of https://github.com/MarkBind/markbind:
Allow changing parameter properties (MarkBind#1075)
Custom timezone for built-in timestamp (MarkBind#1073)
Fix reload inconsistency when updating frontmatter (MarkBind#1068)
Implement an api to ignore content in certain tags (MarkBind#1047)
Enable AppVeyor CI (MarkBind#1040)
Add heading and line highlighting to code blocks (MarkBind#1034)
Add dividers and fix bug in siteNav (MarkBind#1063)
Fixed navbar no longer covers modals (MarkBind#1070)
Add copy code-block plugin (MarkBind#1043)
Render plugins on dynamic resources (MarkBind#1051)
Documentation for Implement no-* attributes for <box> (MarkBind#1042)
Migrate to bootstrap-vue popovers (MarkBind#1033)
Refactor preprocess and url processing functions (MarkBind#1026)
Add pageNav to Using Plugins Page (MarkBind#1062)
# Conflicts:
#	docs/userGuide/syntax/siteNavigationMenus.mbdf
Tejas2805 added a commit
to Tejas2805/markbind
that referenced
this pull request
Mar 9, 2020
@Tejas2805
Merge branch 'master' ofhttps://github.com/MarkBind/markbind
31d0325
* 'master' of https://github.com/MarkBind/markbind:
2.12.0
Update outdated test files
Update vue-strap version to v2.0.1-markbind.37
Fix refactor to processDynamicResources (MarkBind#1092)
Implement lazy page building for markbind serve (MarkBind#1038)
Add warnings for conflicting/deprecated component attribs (MarkBind#1057)
Allow changing parameter properties (MarkBind#1075)
Custom timezone for built-in timestamp (MarkBind#1073)
Fix reload inconsistency when updating frontmatter (MarkBind#1068)
Implement an api to ignore content in certain tags (MarkBind#1047)
Enable AppVeyor CI (MarkBind#1040)
Add heading and line highlighting to code blocks (MarkBind#1034)
Add dividers and fix bug in siteNav (MarkBind#1063)
Fixed navbar no longer covers modals (MarkBind#1070)
Add copy code-block plugin (MarkBind#1043)
Render plugins on dynamic resources (MarkBind#1051)
Documentation for Implement no-* attributes for <box> (MarkBind#1042)
Migrate to bootstrap-vue popovers (MarkBind#1033)
Refactor preprocess and url processing functions (MarkBind#1026)
Add pageNav to Using Plugins Page (MarkBind#1062)
marvinchin pushed a commit
that referenced
this pull request
Apr 10, 2020
@yash-chowdharyMarvin Chin
Add copy code-block plugin (#1043)
ddaa948

This was referenced Mar 7, 2025

Closed

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@openorcloseopenorcloseopenorclose left review comments
@marvinchinmarvinchinmarvinchin approved these changes
@yamgentyamgentAwaiting requested review from yamgent

Assignees


No one assigned


Labels

pr.NewFeature 🆕Enable users (authors/readers) to do something new

Projects


None yet


Milestone

v2.12.0

Development

Successfully merging this pull request may close these issues.

Give a copy button in code blocks


4 participants

@yash-chowdhary@openorclose@marvinchin@yamgent

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Add copy code-block plugin by yash-chowdhary · Pull Request #1043 · MarkBind/markbind · GitHub
Skip to content
Add copy code-block plugin - #1043
Merged
marvinchin merged 10 commits into
MarkBind:masterfrom 
yash-chowdhary:copy-code
Mar 4, 2020
Merged
Add copy code-block plugin#1043
marvinchin merged 10 commits into
MarkBind:masterfrom 
yash-chowdhary:copy-code
Conversation
@yash-chowdhary
@yash-chowdharyyash-chowdhary
commented
Feb 15, 2020•

edited

Loading

Copy link


Copy Markdown

Contributor
What is the purpose of this pull request? (put "X" next to an item, remove the rest)
• [x] New feature
Closes#562
What is the rationale for this request?

Lets users copy code in a given code block.

Since one of MarkBind's major use cases is project documentation, copying code blocks would be very beneficial to users.
What changes did you make? (Give an overview)
Demo
ezgif com-video-to-gif-2
Is there anything you'd like reviewers to focus on?

N/A
Testing instructions:
  • Since this is a plugin, add the following to site.json :

    ..."plugins": [
"codeBlockCopyButtons"
]
...
Proposed commit message: (wrap lines at 72 characters)

Add copy code-block plugin
@yash-chowdhary
yash-chowdhary
marked this pull request as ready for review
February 15, 2020 15:21
@openorclose
openorclose
commented
Feb 15, 2020

Copy link


Copy Markdown

Contributor
What's the reason to use clipboard.js, a rather large file, over a shorter code snippet?
Is it for browser compatibility?
@yash-chowdhary
yash-chowdhary
commented
Feb 15, 2020

Copy link


Copy Markdown

ContributorAuthor
In part, yes. I was also facing some difficulty in using document.execCommand("copy") as it requires the id of the element and our <pre> elements don't have ids.
@openorclose
openorclose
commented
Feb 16, 2020

Copy link


Copy Markdown

Contributor
In part, yes. I was also facing some difficulty in using document.execCommand("copy") as it requires the id of the element and our <pre> elements don't have ids.
The button is located inside the <pre> element, so you should be able to access it with event.target.parentElement.
@yash-chowdhary
yash-chowdhary
commented
Feb 16, 2020•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
I've removed the dependency on clipboard.js.

Updated the PR description accordingly.

Ready for review.
marvinchin
marvinchin
requested changes
Feb 17, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for looking at this - I have a couple of questions 🙂
Comment threadsrc/constants.js
Outdated

Comment threaddocs/userGuide/plugins/copyCode.mbdf
Outdated

Comment threadasset/css/markbind.css
Outdated

Comment threadasset/css/markbind.css
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

openorclose
openorclose
reviewed
Feb 17, 2020
View reviewed changes
Comment threadsrc/plugins/codeBlockCopyButtons.js
Outdated

openorclose
openorclose
reviewed
Feb 17, 2020
View reviewed changes
Comment threadsrc/plugins/codeBlockCopyButtons.js
Outdated

openorclose
openorclose
reviewed
Feb 17, 2020
View reviewed changes
Comment threadsrc/plugins/codeBlockCopyButtons.js
Outdated

marvinchin
marvinchin
reviewed
Feb 21, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just one last question :)
Comment threadasset/css/markbind.css
Outdated

@yash-chowdhary
yash-chowdhary
commented
Feb 25, 2020•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Rebased on master. Ready for review
marvinchin
marvinchin
approved these changes
Feb 25, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM :)
Just a follow-up thought: It feels kinda odd that we add plugin styles to the main markbind.css file. Perhaps we should come up with a better way for plugin writers to keep assets contained within the plugin folder itself.
marvinchin
marvinchin
reviewed
Feb 26, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@yash-chowdhary seems like the version change wasn't caused by changes made this PR, so let's fix it in another one. I believe #1055 should fix it - let's drop that change here and rebase it on top of that instead.
@marvinchinmarvinchin
added this to the v2.11.1 milestone
Feb 27, 2020
@yash-chowdhary
yash-chowdhary
commented
Mar 3, 2020

Copy link


Copy Markdown

ContributorAuthor
Rebased on master. Resolved conflicts.
@marvinchin
marvinchin
merged commit b8413c6
into
MarkBind:masterMar 4, 2020
@yamgentyamgent
added
the 
pr.NewFeature 🆕
Enable users (authors/readers) to do something new
label
Mar 7, 2020
Tejas2805 added a commit
to Tejas2805/markbind
that referenced
this pull request
Mar 7, 2020
@Tejas2805
Merge branch 'master' ofhttps://github.com/MarkBind/markbindinto co…
a5c6f32
…nvert-to-code-block
* 'master' of https://github.com/MarkBind/markbind:
Allow changing parameter properties (MarkBind#1075)
Custom timezone for built-in timestamp (MarkBind#1073)
Fix reload inconsistency when updating frontmatter (MarkBind#1068)
Implement an api to ignore content in certain tags (MarkBind#1047)
Enable AppVeyor CI (MarkBind#1040)
Add heading and line highlighting to code blocks (MarkBind#1034)
Add dividers and fix bug in siteNav (MarkBind#1063)
Fixed navbar no longer covers modals (MarkBind#1070)
Add copy code-block plugin (MarkBind#1043)
Render plugins on dynamic resources (MarkBind#1051)
Documentation for Implement no-* attributes for <box> (MarkBind#1042)
Migrate to bootstrap-vue popovers (MarkBind#1033)
Refactor preprocess and url processing functions (MarkBind#1026)
Add pageNav to Using Plugins Page (MarkBind#1062)
# Conflicts:
#	docs/userGuide/syntax/siteNavigationMenus.mbdf
Tejas2805 added a commit
to Tejas2805/markbind
that referenced
this pull request
Mar 9, 2020
@Tejas2805
Merge branch 'master' ofhttps://github.com/MarkBind/markbind
31d0325
* 'master' of https://github.com/MarkBind/markbind:
2.12.0
Update outdated test files
Update vue-strap version to v2.0.1-markbind.37
Fix refactor to processDynamicResources (MarkBind#1092)
Implement lazy page building for markbind serve (MarkBind#1038)
Add warnings for conflicting/deprecated component attribs (MarkBind#1057)
Allow changing parameter properties (MarkBind#1075)
Custom timezone for built-in timestamp (MarkBind#1073)
Fix reload inconsistency when updating frontmatter (MarkBind#1068)
Implement an api to ignore content in certain tags (MarkBind#1047)
Enable AppVeyor CI (MarkBind#1040)
Add heading and line highlighting to code blocks (MarkBind#1034)
Add dividers and fix bug in siteNav (MarkBind#1063)
Fixed navbar no longer covers modals (MarkBind#1070)
Add copy code-block plugin (MarkBind#1043)
Render plugins on dynamic resources (MarkBind#1051)
Documentation for Implement no-* attributes for <box> (MarkBind#1042)
Migrate to bootstrap-vue popovers (MarkBind#1033)
Refactor preprocess and url processing functions (MarkBind#1026)
Add pageNav to Using Plugins Page (MarkBind#1062)
marvinchin pushed a commit
that referenced
this pull request
Apr 10, 2020
@yash-chowdharyMarvin Chin
Add copy code-block plugin (#1043)
ddaa948

This was referenced Mar 7, 2025

Closed

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@openorcloseopenorcloseopenorclose left review comments
@marvinchinmarvinchinmarvinchin approved these changes
@yamgentyamgentAwaiting requested review from yamgent

Assignees


No one assigned


Labels

pr.NewFeature 🆕Enable users (authors/readers) to do something new

Projects


None yet


Milestone

v2.12.0

Development

Successfully merging this pull request may close these issues.

Give a copy button in code blocks


4 participants

@yash-chowdhary@openorclose@marvinchin@yamgent

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Add copy code-block plugin by yash-chowdhary · Pull Request #1043 · MarkBind/markbind · GitHub
Skip to content
Add copy code-block plugin - #1043
Merged
marvinchin merged 10 commits into
MarkBind:masterfrom 
yash-chowdhary:copy-code
Mar 4, 2020
Merged
Add copy code-block plugin#1043
marvinchin merged 10 commits into
MarkBind:masterfrom 
yash-chowdhary:copy-code
Conversation
@yash-chowdhary
@yash-chowdharyyash-chowdhary
commented
Feb 15, 2020•

edited

Loading

Copy link


Copy Markdown

Contributor
What is the purpose of this pull request? (put "X" next to an item, remove the rest)
• [x] New feature
Closes#562
What is the rationale for this request?

Lets users copy code in a given code block.

Since one of MarkBind's major use cases is project documentation, copying code blocks would be very beneficial to users.
What changes did you make? (Give an overview)
Demo
ezgif com-video-to-gif-2
Is there anything you'd like reviewers to focus on?

N/A
Testing instructions:
  • Since this is a plugin, add the following to site.json :

    ..."plugins": [
"codeBlockCopyButtons"
]
...
Proposed commit message: (wrap lines at 72 characters)

Add copy code-block plugin
@yash-chowdhary
yash-chowdhary
marked this pull request as ready for review
February 15, 2020 15:21
@openorclose
openorclose
commented
Feb 15, 2020

Copy link


Copy Markdown

Contributor
What's the reason to use clipboard.js, a rather large file, over a shorter code snippet?
Is it for browser compatibility?
@yash-chowdhary
yash-chowdhary
commented
Feb 15, 2020

Copy link


Copy Markdown

ContributorAuthor
In part, yes. I was also facing some difficulty in using document.execCommand("copy") as it requires the id of the element and our <pre> elements don't have ids.
@openorclose
openorclose
commented
Feb 16, 2020

Copy link


Copy Markdown

Contributor
In part, yes. I was also facing some difficulty in using document.execCommand("copy") as it requires the id of the element and our <pre> elements don't have ids.
The button is located inside the <pre> element, so you should be able to access it with event.target.parentElement.
@yash-chowdhary
yash-chowdhary
commented
Feb 16, 2020•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
I've removed the dependency on clipboard.js.

Updated the PR description accordingly.

Ready for review.
marvinchin
marvinchin
requested changes
Feb 17, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for looking at this - I have a couple of questions 🙂
Comment threadsrc/constants.js
Outdated

Comment threaddocs/userGuide/plugins/copyCode.mbdf
Outdated

Comment threadasset/css/markbind.css
Outdated

Comment threadasset/css/markbind.css
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

openorclose
openorclose
reviewed
Feb 17, 2020
View reviewed changes
Comment threadsrc/plugins/codeBlockCopyButtons.js
Outdated

openorclose
openorclose
reviewed
Feb 17, 2020
View reviewed changes
Comment threadsrc/plugins/codeBlockCopyButtons.js
Outdated

openorclose
openorclose
reviewed
Feb 17, 2020
View reviewed changes
Comment threadsrc/plugins/codeBlockCopyButtons.js
Outdated

marvinchin
marvinchin
reviewed
Feb 21, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just one last question :)
Comment threadasset/css/markbind.css
Outdated

@yash-chowdhary
yash-chowdhary
commented
Feb 25, 2020•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Rebased on master. Ready for review
marvinchin
marvinchin
approved these changes
Feb 25, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM :)
Just a follow-up thought: It feels kinda odd that we add plugin styles to the main markbind.css file. Perhaps we should come up with a better way for plugin writers to keep assets contained within the plugin folder itself.
marvinchin
marvinchin
reviewed
Feb 26, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@yash-chowdhary seems like the version change wasn't caused by changes made this PR, so let's fix it in another one. I believe #1055 should fix it - let's drop that change here and rebase it on top of that instead.
@marvinchinmarvinchin
added this to the v2.11.1 milestone
Feb 27, 2020
@yash-chowdhary
yash-chowdhary
commented
Mar 3, 2020

Copy link


Copy Markdown

ContributorAuthor
Rebased on master. Resolved conflicts.
@marvinchin
marvinchin
merged commit b8413c6
into
MarkBind:masterMar 4, 2020
@yamgentyamgent
added
the 
pr.NewFeature 🆕
Enable users (authors/readers) to do something new
label
Mar 7, 2020
Tejas2805 added a commit
to Tejas2805/markbind
that referenced
this pull request
Mar 7, 2020
@Tejas2805
Merge branch 'master' ofhttps://github.com/MarkBind/markbindinto co…
a5c6f32
…nvert-to-code-block
* 'master' of https://github.com/MarkBind/markbind:
Allow changing parameter properties (MarkBind#1075)
Custom timezone for built-in timestamp (MarkBind#1073)
Fix reload inconsistency when updating frontmatter (MarkBind#1068)
Implement an api to ignore content in certain tags (MarkBind#1047)
Enable AppVeyor CI (MarkBind#1040)
Add heading and line highlighting to code blocks (MarkBind#1034)
Add dividers and fix bug in siteNav (MarkBind#1063)
Fixed navbar no longer covers modals (MarkBind#1070)
Add copy code-block plugin (MarkBind#1043)
Render plugins on dynamic resources (MarkBind#1051)
Documentation for Implement no-* attributes for <box> (MarkBind#1042)
Migrate to bootstrap-vue popovers (MarkBind#1033)
Refactor preprocess and url processing functions (MarkBind#1026)
Add pageNav to Using Plugins Page (MarkBind#1062)
# Conflicts:
#	docs/userGuide/syntax/siteNavigationMenus.mbdf
Tejas2805 added a commit
to Tejas2805/markbind
that referenced
this pull request
Mar 9, 2020
@Tejas2805
Merge branch 'master' ofhttps://github.com/MarkBind/markbind
31d0325
* 'master' of https://github.com/MarkBind/markbind:
2.12.0
Update outdated test files
Update vue-strap version to v2.0.1-markbind.37
Fix refactor to processDynamicResources (MarkBind#1092)
Implement lazy page building for markbind serve (MarkBind#1038)
Add warnings for conflicting/deprecated component attribs (MarkBind#1057)
Allow changing parameter properties (MarkBind#1075)
Custom timezone for built-in timestamp (MarkBind#1073)
Fix reload inconsistency when updating frontmatter (MarkBind#1068)
Implement an api to ignore content in certain tags (MarkBind#1047)
Enable AppVeyor CI (MarkBind#1040)
Add heading and line highlighting to code blocks (MarkBind#1034)
Add dividers and fix bug in siteNav (MarkBind#1063)
Fixed navbar no longer covers modals (MarkBind#1070)
Add copy code-block plugin (MarkBind#1043)
Render plugins on dynamic resources (MarkBind#1051)
Documentation for Implement no-* attributes for <box> (MarkBind#1042)
Migrate to bootstrap-vue popovers (MarkBind#1033)
Refactor preprocess and url processing functions (MarkBind#1026)
Add pageNav to Using Plugins Page (MarkBind#1062)
marvinchin pushed a commit
that referenced
this pull request
Apr 10, 2020
@yash-chowdharyMarvin Chin
Add copy code-block plugin (#1043)
ddaa948

This was referenced Mar 7, 2025

Closed

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@openorcloseopenorcloseopenorclose left review comments
@marvinchinmarvinchinmarvinchin approved these changes
@yamgentyamgentAwaiting requested review from yamgent

Assignees


No one assigned


Labels

pr.NewFeature 🆕Enable users (authors/readers) to do something new

Projects


None yet


Milestone

v2.12.0

Development

Successfully merging this pull request may close these issues.

Give a copy button in code blocks


4 participants

@yash-chowdhary@openorclose@marvinchin@yamgent

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
Add copy code-block plugin by yash-chowdhary · Pull Request #1043 · MarkBind/markbind · GitHub
Skip to content
Add copy code-block plugin - #1043
Merged
marvinchin merged 10 commits into
MarkBind:masterfrom 
yash-chowdhary:copy-code
Mar 4, 2020
Merged
Add copy code-block plugin#1043
marvinchin merged 10 commits into
MarkBind:masterfrom 
yash-chowdhary:copy-code
Conversation
@yash-chowdhary
@yash-chowdharyyash-chowdhary
commented
Feb 15, 2020•

edited

Loading

Copy link


Copy Markdown

Contributor
What is the purpose of this pull request? (put "X" next to an item, remove the rest)
• [x] New feature
Closes#562
What is the rationale for this request?

Lets users copy code in a given code block.

Since one of MarkBind's major use cases is project documentation, copying code blocks would be very beneficial to users.
What changes did you make? (Give an overview)
Demo
ezgif com-video-to-gif-2
Is there anything you'd like reviewers to focus on?

N/A
Testing instructions:
  • Since this is a plugin, add the following to site.json :

    ..."plugins": [
"codeBlockCopyButtons"
]
...
Proposed commit message: (wrap lines at 72 characters)

Add copy code-block plugin
@yash-chowdhary
yash-chowdhary
marked this pull request as ready for review
February 15, 2020 15:21
@openorclose
openorclose
commented
Feb 15, 2020

Copy link


Copy Markdown

Contributor
What's the reason to use clipboard.js, a rather large file, over a shorter code snippet?
Is it for browser compatibility?
@yash-chowdhary
yash-chowdhary
commented
Feb 15, 2020

Copy link


Copy Markdown

ContributorAuthor
In part, yes. I was also facing some difficulty in using document.execCommand("copy") as it requires the id of the element and our <pre> elements don't have ids.
@openorclose
openorclose
commented
Feb 16, 2020

Copy link


Copy Markdown

Contributor
In part, yes. I was also facing some difficulty in using document.execCommand("copy") as it requires the id of the element and our <pre> elements don't have ids.
The button is located inside the <pre> element, so you should be able to access it with event.target.parentElement.
@yash-chowdhary
yash-chowdhary
commented
Feb 16, 2020•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
I've removed the dependency on clipboard.js.

Updated the PR description accordingly.

Ready for review.
marvinchin
marvinchin
requested changes
Feb 17, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for looking at this - I have a couple of questions 🙂
Comment threadsrc/constants.js
Outdated

Comment threaddocs/userGuide/plugins/copyCode.mbdf
Outdated

Comment threadasset/css/markbind.css
Outdated

Comment threadasset/css/markbind.css
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

openorclose
openorclose
reviewed
Feb 17, 2020
View reviewed changes
Comment threadsrc/plugins/codeBlockCopyButtons.js
Outdated

openorclose
openorclose
reviewed
Feb 17, 2020
View reviewed changes
Comment threadsrc/plugins/codeBlockCopyButtons.js
Outdated

openorclose
openorclose
reviewed
Feb 17, 2020
View reviewed changes
Comment threadsrc/plugins/codeBlockCopyButtons.js
Outdated

marvinchin
marvinchin
reviewed
Feb 21, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just one last question :)
Comment threadasset/css/markbind.css
Outdated

@yash-chowdhary
yash-chowdhary
commented
Feb 25, 2020•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Rebased on master. Ready for review
marvinchin
marvinchin
approved these changes
Feb 25, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM :)
Just a follow-up thought: It feels kinda odd that we add plugin styles to the main markbind.css file. Perhaps we should come up with a better way for plugin writers to keep assets contained within the plugin folder itself.
marvinchin
marvinchin
reviewed
Feb 26, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@yash-chowdhary seems like the version change wasn't caused by changes made this PR, so let's fix it in another one. I believe #1055 should fix it - let's drop that change here and rebase it on top of that instead.
@marvinchinmarvinchin
added this to the v2.11.1 milestone
Feb 27, 2020
@yash-chowdhary
yash-chowdhary
commented
Mar 3, 2020

Copy link


Copy Markdown

ContributorAuthor
Rebased on master. Resolved conflicts.
@marvinchin
marvinchin
merged commit b8413c6
into
MarkBind:masterMar 4, 2020
@yamgentyamgent
added
the 
pr.NewFeature 🆕
Enable users (authors/readers) to do something new
label
Mar 7, 2020
Tejas2805 added a commit
to Tejas2805/markbind
that referenced
this pull request
Mar 7, 2020
@Tejas2805
Merge branch 'master' ofhttps://github.com/MarkBind/markbindinto co…
a5c6f32
…nvert-to-code-block
* 'master' of https://github.com/MarkBind/markbind:
Allow changing parameter properties (MarkBind#1075)
Custom timezone for built-in timestamp (MarkBind#1073)
Fix reload inconsistency when updating frontmatter (MarkBind#1068)
Implement an api to ignore content in certain tags (MarkBind#1047)
Enable AppVeyor CI (MarkBind#1040)
Add heading and line highlighting to code blocks (MarkBind#1034)
Add dividers and fix bug in siteNav (MarkBind#1063)
Fixed navbar no longer covers modals (MarkBind#1070)
Add copy code-block plugin (MarkBind#1043)
Render plugins on dynamic resources (MarkBind#1051)
Documentation for Implement no-* attributes for <box> (MarkBind#1042)
Migrate to bootstrap-vue popovers (MarkBind#1033)
Refactor preprocess and url processing functions (MarkBind#1026)
Add pageNav to Using Plugins Page (MarkBind#1062)
# Conflicts:
#	docs/userGuide/syntax/siteNavigationMenus.mbdf
Tejas2805 added a commit
to Tejas2805/markbind
that referenced
this pull request
Mar 9, 2020
@Tejas2805
Merge branch 'master' ofhttps://github.com/MarkBind/markbind
31d0325
* 'master' of https://github.com/MarkBind/markbind:
2.12.0
Update outdated test files
Update vue-strap version to v2.0.1-markbind.37
Fix refactor to processDynamicResources (MarkBind#1092)
Implement lazy page building for markbind serve (MarkBind#1038)
Add warnings for conflicting/deprecated component attribs (MarkBind#1057)
Allow changing parameter properties (MarkBind#1075)
Custom timezone for built-in timestamp (MarkBind#1073)
Fix reload inconsistency when updating frontmatter (MarkBind#1068)
Implement an api to ignore content in certain tags (MarkBind#1047)
Enable AppVeyor CI (MarkBind#1040)
Add heading and line highlighting to code blocks (MarkBind#1034)
Add dividers and fix bug in siteNav (MarkBind#1063)
Fixed navbar no longer covers modals (MarkBind#1070)
Add copy code-block plugin (MarkBind#1043)
Render plugins on dynamic resources (MarkBind#1051)
Documentation for Implement no-* attributes for <box> (MarkBind#1042)
Migrate to bootstrap-vue popovers (MarkBind#1033)
Refactor preprocess and url processing functions (MarkBind#1026)
Add pageNav to Using Plugins Page (MarkBind#1062)
marvinchin pushed a commit
that referenced
this pull request
Apr 10, 2020
@yash-chowdharyMarvin Chin
Add copy code-block plugin (#1043)
ddaa948

This was referenced Mar 7, 2025

Closed

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@openorcloseopenorcloseopenorclose left review comments
@marvinchinmarvinchinmarvinchin approved these changes
@yamgentyamgentAwaiting requested review from yamgent

Assignees


No one assigned


Labels

pr.NewFeature 🆕Enable users (authors/readers) to do something new

Projects


None yet


Milestone

v2.12.0

Development

Successfully merging this pull request may close these issues.

Give a copy button in code blocks


4 participants

@yash-chowdhary@openorclose@marvinchin@yamgent

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Add copy code-block plugin by yash-chowdhary · Pull Request #1043 · MarkBind/markbind · GitHub
Skip to content
Add copy code-block plugin - #1043
Merged
marvinchin merged 10 commits into
MarkBind:masterfrom 
yash-chowdhary:copy-code
Mar 4, 2020
Merged
Add copy code-block plugin#1043
marvinchin merged 10 commits into
MarkBind:masterfrom 
yash-chowdhary:copy-code
Conversation
@yash-chowdhary
@yash-chowdharyyash-chowdhary
commented
Feb 15, 2020•

edited

Loading

Copy link


Copy Markdown

Contributor
What is the purpose of this pull request? (put "X" next to an item, remove the rest)
• [x] New feature
Closes#562
What is the rationale for this request?

Lets users copy code in a given code block.

Since one of MarkBind's major use cases is project documentation, copying code blocks would be very beneficial to users.
What changes did you make? (Give an overview)
Demo
ezgif com-video-to-gif-2
Is there anything you'd like reviewers to focus on?

N/A
Testing instructions:
  • Since this is a plugin, add the following to site.json :

    ..."plugins": [
"codeBlockCopyButtons"
]
...
Proposed commit message: (wrap lines at 72 characters)

Add copy code-block plugin
@yash-chowdhary
yash-chowdhary
marked this pull request as ready for review
February 15, 2020 15:21
@openorclose
openorclose
commented
Feb 15, 2020

Copy link


Copy Markdown

Contributor
What's the reason to use clipboard.js, a rather large file, over a shorter code snippet?
Is it for browser compatibility?
@yash-chowdhary
yash-chowdhary
commented
Feb 15, 2020

Copy link


Copy Markdown

ContributorAuthor
In part, yes. I was also facing some difficulty in using document.execCommand("copy") as it requires the id of the element and our <pre> elements don't have ids.
@openorclose
openorclose
commented
Feb 16, 2020

Copy link


Copy Markdown

Contributor
In part, yes. I was also facing some difficulty in using document.execCommand("copy") as it requires the id of the element and our <pre> elements don't have ids.
The button is located inside the <pre> element, so you should be able to access it with event.target.parentElement.
@yash-chowdhary
yash-chowdhary
commented
Feb 16, 2020•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
I've removed the dependency on clipboard.js.

Updated the PR description accordingly.

Ready for review.
marvinchin
marvinchin
requested changes
Feb 17, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for looking at this - I have a couple of questions 🙂
Comment threadsrc/constants.js
Outdated

Comment threaddocs/userGuide/plugins/copyCode.mbdf
Outdated

Comment threadasset/css/markbind.css
Outdated

Comment threadasset/css/markbind.css
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

openorclose
openorclose
reviewed
Feb 17, 2020
View reviewed changes
Comment threadsrc/plugins/codeBlockCopyButtons.js
Outdated

openorclose
openorclose
reviewed
Feb 17, 2020
View reviewed changes
Comment threadsrc/plugins/codeBlockCopyButtons.js
Outdated

openorclose
openorclose
reviewed
Feb 17, 2020
View reviewed changes
Comment threadsrc/plugins/codeBlockCopyButtons.js
Outdated

marvinchin
marvinchin
reviewed
Feb 21, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just one last question :)
Comment threadasset/css/markbind.css
Outdated

@yash-chowdhary
yash-chowdhary
commented
Feb 25, 2020•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Rebased on master. Ready for review
marvinchin
marvinchin
approved these changes
Feb 25, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM :)
Just a follow-up thought: It feels kinda odd that we add plugin styles to the main markbind.css file. Perhaps we should come up with a better way for plugin writers to keep assets contained within the plugin folder itself.
marvinchin
marvinchin
reviewed
Feb 26, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@yash-chowdhary seems like the version change wasn't caused by changes made this PR, so let's fix it in another one. I believe #1055 should fix it - let's drop that change here and rebase it on top of that instead.
@marvinchinmarvinchin
added this to the v2.11.1 milestone
Feb 27, 2020
@yash-chowdhary
yash-chowdhary
commented
Mar 3, 2020

Copy link


Copy Markdown

ContributorAuthor
Rebased on master. Resolved conflicts.
@marvinchin
marvinchin
merged commit b8413c6
into
MarkBind:masterMar 4, 2020
@yamgentyamgent
added
the 
pr.NewFeature 🆕
Enable users (authors/readers) to do something new
label
Mar 7, 2020
Tejas2805 added a commit
to Tejas2805/markbind
that referenced
this pull request
Mar 7, 2020
@Tejas2805
Merge branch 'master' ofhttps://github.com/MarkBind/markbindinto co…
a5c6f32
…nvert-to-code-block
* 'master' of https://github.com/MarkBind/markbind:
Allow changing parameter properties (MarkBind#1075)
Custom timezone for built-in timestamp (MarkBind#1073)
Fix reload inconsistency when updating frontmatter (MarkBind#1068)
Implement an api to ignore content in certain tags (MarkBind#1047)
Enable AppVeyor CI (MarkBind#1040)
Add heading and line highlighting to code blocks (MarkBind#1034)
Add dividers and fix bug in siteNav (MarkBind#1063)
Fixed navbar no longer covers modals (MarkBind#1070)
Add copy code-block plugin (MarkBind#1043)
Render plugins on dynamic resources (MarkBind#1051)
Documentation for Implement no-* attributes for <box> (MarkBind#1042)
Migrate to bootstrap-vue popovers (MarkBind#1033)
Refactor preprocess and url processing functions (MarkBind#1026)
Add pageNav to Using Plugins Page (MarkBind#1062)
# Conflicts:
#	docs/userGuide/syntax/siteNavigationMenus.mbdf
Tejas2805 added a commit
to Tejas2805/markbind
that referenced
this pull request
Mar 9, 2020
@Tejas2805
Merge branch 'master' ofhttps://github.com/MarkBind/markbind
31d0325
* 'master' of https://github.com/MarkBind/markbind:
2.12.0
Update outdated test files
Update vue-strap version to v2.0.1-markbind.37
Fix refactor to processDynamicResources (MarkBind#1092)
Implement lazy page building for markbind serve (MarkBind#1038)
Add warnings for conflicting/deprecated component attribs (MarkBind#1057)
Allow changing parameter properties (MarkBind#1075)
Custom timezone for built-in timestamp (MarkBind#1073)
Fix reload inconsistency when updating frontmatter (MarkBind#1068)
Implement an api to ignore content in certain tags (MarkBind#1047)
Enable AppVeyor CI (MarkBind#1040)
Add heading and line highlighting to code blocks (MarkBind#1034)
Add dividers and fix bug in siteNav (MarkBind#1063)
Fixed navbar no longer covers modals (MarkBind#1070)
Add copy code-block plugin (MarkBind#1043)
Render plugins on dynamic resources (MarkBind#1051)
Documentation for Implement no-* attributes for <box> (MarkBind#1042)
Migrate to bootstrap-vue popovers (MarkBind#1033)
Refactor preprocess and url processing functions (MarkBind#1026)
Add pageNav to Using Plugins Page (MarkBind#1062)
marvinchin pushed a commit
that referenced
this pull request
Apr 10, 2020
@yash-chowdharyMarvin Chin
Add copy code-block plugin (#1043)
ddaa948

This was referenced Mar 7, 2025

Closed

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@openorcloseopenorcloseopenorclose left review comments
@marvinchinmarvinchinmarvinchin approved these changes
@yamgentyamgentAwaiting requested review from yamgent

Assignees


No one assigned


Labels

pr.NewFeature 🆕Enable users (authors/readers) to do something new

Projects


None yet


Milestone

v2.12.0

Development

Successfully merging this pull request may close these issues.

Give a copy button in code blocks


4 participants

@yash-chowdhary@openorclose@marvinchin@yamgent

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Add copy code-block plugin by yash-chowdhary · Pull Request #1043 · MarkBind/markbind · GitHub
Skip to content
Add copy code-block plugin - #1043
Merged
marvinchin merged 10 commits into
MarkBind:masterfrom 
yash-chowdhary:copy-code
Mar 4, 2020
Merged
Add copy code-block plugin#1043
marvinchin merged 10 commits into
MarkBind:masterfrom 
yash-chowdhary:copy-code
Conversation
@yash-chowdhary
@yash-chowdharyyash-chowdhary
commented
Feb 15, 2020•

edited

Loading

Copy link


Copy Markdown

Contributor
What is the purpose of this pull request? (put "X" next to an item, remove the rest)
• [x] New feature
Closes#562
What is the rationale for this request?

Lets users copy code in a given code block.

Since one of MarkBind's major use cases is project documentation, copying code blocks would be very beneficial to users.
What changes did you make? (Give an overview)
Demo
ezgif com-video-to-gif-2
Is there anything you'd like reviewers to focus on?

N/A
Testing instructions:
  • Since this is a plugin, add the following to site.json :

    ..."plugins": [
"codeBlockCopyButtons"
]
...
Proposed commit message: (wrap lines at 72 characters)

Add copy code-block plugin
@yash-chowdhary
yash-chowdhary
marked this pull request as ready for review
February 15, 2020 15:21
@openorclose
openorclose
commented
Feb 15, 2020

Copy link


Copy Markdown

Contributor
What's the reason to use clipboard.js, a rather large file, over a shorter code snippet?
Is it for browser compatibility?
@yash-chowdhary
yash-chowdhary
commented
Feb 15, 2020

Copy link


Copy Markdown

ContributorAuthor
In part, yes. I was also facing some difficulty in using document.execCommand("copy") as it requires the id of the element and our <pre> elements don't have ids.
@openorclose
openorclose
commented
Feb 16, 2020

Copy link


Copy Markdown

Contributor
In part, yes. I was also facing some difficulty in using document.execCommand("copy") as it requires the id of the element and our <pre> elements don't have ids.
The button is located inside the <pre> element, so you should be able to access it with event.target.parentElement.
@yash-chowdhary
yash-chowdhary
commented
Feb 16, 2020•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
I've removed the dependency on clipboard.js.

Updated the PR description accordingly.

Ready for review.
marvinchin
marvinchin
requested changes
Feb 17, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for looking at this - I have a couple of questions 🙂
Comment threadsrc/constants.js
Outdated

Comment threaddocs/userGuide/plugins/copyCode.mbdf
Outdated

Comment threadasset/css/markbind.css
Outdated

Comment threadasset/css/markbind.css
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

openorclose
openorclose
reviewed
Feb 17, 2020
View reviewed changes
Comment threadsrc/plugins/codeBlockCopyButtons.js
Outdated

openorclose
openorclose
reviewed
Feb 17, 2020
View reviewed changes
Comment threadsrc/plugins/codeBlockCopyButtons.js
Outdated

openorclose
openorclose
reviewed
Feb 17, 2020
View reviewed changes
Comment threadsrc/plugins/codeBlockCopyButtons.js
Outdated

marvinchin
marvinchin
reviewed
Feb 21, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just one last question :)
Comment threadasset/css/markbind.css
Outdated

@yash-chowdhary
yash-chowdhary
commented
Feb 25, 2020•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Rebased on master. Ready for review
marvinchin
marvinchin
approved these changes
Feb 25, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM :)
Just a follow-up thought: It feels kinda odd that we add plugin styles to the main markbind.css file. Perhaps we should come up with a better way for plugin writers to keep assets contained within the plugin folder itself.
marvinchin
marvinchin
reviewed
Feb 26, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@yash-chowdhary seems like the version change wasn't caused by changes made this PR, so let's fix it in another one. I believe #1055 should fix it - let's drop that change here and rebase it on top of that instead.
@marvinchinmarvinchin
added this to the v2.11.1 milestone
Feb 27, 2020
@yash-chowdhary
yash-chowdhary
commented
Mar 3, 2020

Copy link


Copy Markdown

ContributorAuthor
Rebased on master. Resolved conflicts.
@marvinchin
marvinchin
merged commit b8413c6
into
MarkBind:masterMar 4, 2020
@yamgentyamgent
added
the 
pr.NewFeature 🆕
Enable users (authors/readers) to do something new
label
Mar 7, 2020
Tejas2805 added a commit
to Tejas2805/markbind
that referenced
this pull request
Mar 7, 2020
@Tejas2805
Merge branch 'master' ofhttps://github.com/MarkBind/markbindinto co…
a5c6f32
…nvert-to-code-block
* 'master' of https://github.com/MarkBind/markbind:
Allow changing parameter properties (MarkBind#1075)
Custom timezone for built-in timestamp (MarkBind#1073)
Fix reload inconsistency when updating frontmatter (MarkBind#1068)
Implement an api to ignore content in certain tags (MarkBind#1047)
Enable AppVeyor CI (MarkBind#1040)
Add heading and line highlighting to code blocks (MarkBind#1034)
Add dividers and fix bug in siteNav (MarkBind#1063)
Fixed navbar no longer covers modals (MarkBind#1070)
Add copy code-block plugin (MarkBind#1043)
Render plugins on dynamic resources (MarkBind#1051)
Documentation for Implement no-* attributes for <box> (MarkBind#1042)
Migrate to bootstrap-vue popovers (MarkBind#1033)
Refactor preprocess and url processing functions (MarkBind#1026)
Add pageNav to Using Plugins Page (MarkBind#1062)
# Conflicts:
#	docs/userGuide/syntax/siteNavigationMenus.mbdf
Tejas2805 added a commit
to Tejas2805/markbind
that referenced
this pull request
Mar 9, 2020
@Tejas2805
Merge branch 'master' ofhttps://github.com/MarkBind/markbind
31d0325
* 'master' of https://github.com/MarkBind/markbind:
2.12.0
Update outdated test files
Update vue-strap version to v2.0.1-markbind.37
Fix refactor to processDynamicResources (MarkBind#1092)
Implement lazy page building for markbind serve (MarkBind#1038)
Add warnings for conflicting/deprecated component attribs (MarkBind#1057)
Allow changing parameter properties (MarkBind#1075)
Custom timezone for built-in timestamp (MarkBind#1073)
Fix reload inconsistency when updating frontmatter (MarkBind#1068)
Implement an api to ignore content in certain tags (MarkBind#1047)
Enable AppVeyor CI (MarkBind#1040)
Add heading and line highlighting to code blocks (MarkBind#1034)
Add dividers and fix bug in siteNav (MarkBind#1063)
Fixed navbar no longer covers modals (MarkBind#1070)
Add copy code-block plugin (MarkBind#1043)
Render plugins on dynamic resources (MarkBind#1051)
Documentation for Implement no-* attributes for <box> (MarkBind#1042)
Migrate to bootstrap-vue popovers (MarkBind#1033)
Refactor preprocess and url processing functions (MarkBind#1026)
Add pageNav to Using Plugins Page (MarkBind#1062)
marvinchin pushed a commit
that referenced
this pull request
Apr 10, 2020
@yash-chowdharyMarvin Chin
Add copy code-block plugin (#1043)
ddaa948

This was referenced Mar 7, 2025

Closed

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@openorcloseopenorcloseopenorclose left review comments
@marvinchinmarvinchinmarvinchin approved these changes
@yamgentyamgentAwaiting requested review from yamgent

Assignees


No one assigned


Labels

pr.NewFeature 🆕Enable users (authors/readers) to do something new

Projects


None yet


Milestone

v2.12.0

Development

Successfully merging this pull request may close these issues.

Give a copy button in code blocks


4 participants

@yash-chowdhary@openorclose@marvinchin@yamgent

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
Add copy code-block plugin by yash-chowdhary · Pull Request #1043 · MarkBind/markbind · GitHub
Skip to content
Add copy code-block plugin - #1043
Merged
marvinchin merged 10 commits into
MarkBind:masterfrom 
yash-chowdhary:copy-code
Mar 4, 2020
Merged
Add copy code-block plugin#1043
marvinchin merged 10 commits into
MarkBind:masterfrom 
yash-chowdhary:copy-code
Conversation
@yash-chowdhary
@yash-chowdharyyash-chowdhary
commented
Feb 15, 2020•

edited

Loading

Copy link


Copy Markdown

Contributor
What is the purpose of this pull request? (put "X" next to an item, remove the rest)
• [x] New feature
Closes#562
What is the rationale for this request?

Lets users copy code in a given code block.

Since one of MarkBind's major use cases is project documentation, copying code blocks would be very beneficial to users.
What changes did you make? (Give an overview)
Demo
ezgif com-video-to-gif-2
Is there anything you'd like reviewers to focus on?

N/A
Testing instructions:
  • Since this is a plugin, add the following to site.json :

    ..."plugins": [
"codeBlockCopyButtons"
]
...
Proposed commit message: (wrap lines at 72 characters)

Add copy code-block plugin
@yash-chowdhary
yash-chowdhary
marked this pull request as ready for review
February 15, 2020 15:21
@openorclose
openorclose
commented
Feb 15, 2020

Copy link


Copy Markdown

Contributor
What's the reason to use clipboard.js, a rather large file, over a shorter code snippet?
Is it for browser compatibility?
@yash-chowdhary
yash-chowdhary
commented
Feb 15, 2020

Copy link


Copy Markdown

ContributorAuthor
In part, yes. I was also facing some difficulty in using document.execCommand("copy") as it requires the id of the element and our <pre> elements don't have ids.
@openorclose
openorclose
commented
Feb 16, 2020

Copy link


Copy Markdown

Contributor
In part, yes. I was also facing some difficulty in using document.execCommand("copy") as it requires the id of the element and our <pre> elements don't have ids.
The button is located inside the <pre> element, so you should be able to access it with event.target.parentElement.
@yash-chowdhary
yash-chowdhary
commented
Feb 16, 2020•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
I've removed the dependency on clipboard.js.

Updated the PR description accordingly.

Ready for review.
marvinchin
marvinchin
requested changes
Feb 17, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for looking at this - I have a couple of questions 🙂
Comment threadsrc/constants.js
Outdated

Comment threaddocs/userGuide/plugins/copyCode.mbdf
Outdated

Comment threadasset/css/markbind.css
Outdated

Comment threadasset/css/markbind.css
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

Comment threadsrc/plugins/copyCode.js
Outdated

openorclose
openorclose
reviewed
Feb 17, 2020
View reviewed changes
Comment threadsrc/plugins/codeBlockCopyButtons.js
Outdated

openorclose
openorclose
reviewed
Feb 17, 2020
View reviewed changes
Comment threadsrc/plugins/codeBlockCopyButtons.js
Outdated

openorclose
openorclose
reviewed
Feb 17, 2020
View reviewed changes
Comment threadsrc/plugins/codeBlockCopyButtons.js
Outdated

marvinchin
marvinchin
reviewed
Feb 21, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just one last question :)
Comment threadasset/css/markbind.css
Outdated

@yash-chowdhary
yash-chowdhary
commented
Feb 25, 2020•

edited

Loading

Copy link


Copy Markdown

ContributorAuthor
Rebased on master. Ready for review
marvinchin
marvinchin
approved these changes
Feb 25, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM :)
Just a follow-up thought: It feels kinda odd that we add plugin styles to the main markbind.css file. Perhaps we should come up with a better way for plugin writers to keep assets contained within the plugin folder itself.
marvinchin
marvinchin
reviewed
Feb 26, 2020
View reviewed changes
@marvinchinmarvinchin
left a comment


Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@yash-chowdhary seems like the version change wasn't caused by changes made this PR, so let's fix it in another one. I believe #1055 should fix it - let's drop that change here and rebase it on top of that instead.
@marvinchinmarvinchin
added this to the v2.11.1 milestone
Feb 27, 2020
@yash-chowdhary
yash-chowdhary
commented
Mar 3, 2020

Copy link


Copy Markdown

ContributorAuthor
Rebased on master. Resolved conflicts.
@marvinchin
marvinchin
merged commit b8413c6
into
MarkBind:masterMar 4, 2020
@yamgentyamgent
added
the 
pr.NewFeature 🆕
Enable users (authors/readers) to do something new
label
Mar 7, 2020
Tejas2805 added a commit
to Tejas2805/markbind
that referenced
this pull request
Mar 7, 2020
@Tejas2805
Merge branch 'master' ofhttps://github.com/MarkBind/markbindinto co…
a5c6f32
…nvert-to-code-block
* 'master' of https://github.com/MarkBind/markbind:
Allow changing parameter properties (MarkBind#1075)
Custom timezone for built-in timestamp (MarkBind#1073)
Fix reload inconsistency when updating frontmatter (MarkBind#1068)
Implement an api to ignore content in certain tags (MarkBind#1047)
Enable AppVeyor CI (MarkBind#1040)
Add heading and line highlighting to code blocks (MarkBind#1034)
Add dividers and fix bug in siteNav (MarkBind#1063)
Fixed navbar no longer covers modals (MarkBind#1070)
Add copy code-block plugin (MarkBind#1043)
Render plugins on dynamic resources (MarkBind#1051)
Documentation for Implement no-* attributes for <box> (MarkBind#1042)
Migrate to bootstrap-vue popovers (MarkBind#1033)
Refactor preprocess and url processing functions (MarkBind#1026)
Add pageNav to Using Plugins Page (MarkBind#1062)
# Conflicts:
#	docs/userGuide/syntax/siteNavigationMenus.mbdf
Tejas2805 added a commit
to Tejas2805/markbind
that referenced
this pull request
Mar 9, 2020
@Tejas2805
Merge branch 'master' ofhttps://github.com/MarkBind/markbind
31d0325
* 'master' of https://github.com/MarkBind/markbind:
2.12.0
Update outdated test files
Update vue-strap version to v2.0.1-markbind.37
Fix refactor to processDynamicResources (MarkBind#1092)
Implement lazy page building for markbind serve (MarkBind#1038)
Add warnings for conflicting/deprecated component attribs (MarkBind#1057)
Allow changing parameter properties (MarkBind#1075)
Custom timezone for built-in timestamp (MarkBind#1073)
Fix reload inconsistency when updating frontmatter (MarkBind#1068)
Implement an api to ignore content in certain tags (MarkBind#1047)
Enable AppVeyor CI (MarkBind#1040)
Add heading and line highlighting to code blocks (MarkBind#1034)
Add dividers and fix bug in siteNav (MarkBind#1063)
Fixed navbar no longer covers modals (MarkBind#1070)
Add copy code-block plugin (MarkBind#1043)
Render plugins on dynamic resources (MarkBind#1051)
Documentation for Implement no-* attributes for <box> (MarkBind#1042)
Migrate to bootstrap-vue popovers (MarkBind#1033)
Refactor preprocess and url processing functions (MarkBind#1026)
Add pageNav to Using Plugins Page (MarkBind#1062)
marvinchin pushed a commit
that referenced
this pull request
Apr 10, 2020
@yash-chowdharyMarvin Chin
Add copy code-block plugin (#1043)
ddaa948

This was referenced Mar 7, 2025

Closed

 Merged

Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@openorcloseopenorcloseopenorclose left review comments
@marvinchinmarvinchinmarvinchin approved these changes
@yamgentyamgentAwaiting requested review from yamgent

Assignees


No one assigned


Labels

pr.NewFeature 🆕Enable users (authors/readers) to do something new

Projects


None yet


Milestone

v2.12.0

Development

Successfully merging this pull request may close these issues.

Give a copy button in code blocks


4 participants

@yash-chowdhary@openorclose@marvinchin@yamgent