diff --git a/_javascripts/clipboard.js b/_javascripts/clipboard.js
new file mode 100644
index 0000000000..87e80b1ce9
--- /dev/null
+++ b/_javascripts/clipboard.js
@@ -0,0 +1,43 @@
+// This file runs the Clipboard.js functionality
+document.querySelectorAll('div.listingblock').forEach((codeblock, index) => {
+ codeblock.getElementsByTagName('pre')[0].insertAdjacentHTML("beforebegin", "
");
+ document.getElementsByTagName('pre')[index].setAttribute('id',`clipboard-${index}`);
+});
+
+document.querySelectorAll('span.clipboard-button').forEach((copybutton, index) => {
+ copybutton.setAttribute('data-clipboard-target',`#clipboard-${index}`);
+});
+
+var clipboard = new ClipboardJS('.clipboard-button', {
+ text: function(target) {
+ const targetId = target.getAttribute('data-clipboard-target').substr(1);
+ const clipboardText = document.getElementById(targetId).innerText.replace(/\$\s/g, "");
+
+ if (clipboardText.slice(0, 2) === "# ") {
+ return clipboardText.substr(2);
+ }
+
+ return clipboardText;
+ }
+});
+
+clipboard.on("success", function (e) {
+ const triggerId = e.trigger.getAttribute("data-clipboard-target").substr(1);
+ const triggerNode = document.getElementById(triggerId);
+
+ const selection = window.getSelection();
+ selection.removeAllRanges();
+
+ const range = document.createRange();
+ range.selectNodeContents(triggerNode);
+ selection.addRange(range);
+
+ e.trigger.classList.toggle("fa-clipboard");
+ e.trigger.classList.toggle("fa-check");
+
+ setTimeout(function () {
+ e.clearSelection();
+ e.trigger.classList.toggle("fa-clipboard");
+ e.trigger.classList.toggle("fa-check");
+ }, 2000);
+});
diff --git a/_stylesheets/docs.css b/_stylesheets/docs.css
index 837b98ae93..25e90ecf82 100644
--- a/_stylesheets/docs.css
+++ b/_stylesheets/docs.css
@@ -141,6 +141,38 @@ License: https://creativecommons.org/licenses/by/2.0/
/* End footer edits */
+/* ClipboardJS */
+p.clipboard-button-container {
+ position: relative;
+}
+
+span.clipboard-button {
+ position: absolute;
+ right: 0px;
+ bottom: -28px;
+ z-index: 1;
+ display: block;
+ width: 30px;
+ padding: 5px;
+ text-align: center;
+}
+
+span.clipboard-button:hover {
+ cursor: pointer;
+}
+
+.fa-clipboard {
+ color: #404040;
+}
+
+.fa-clipboard:hover {
+ color: #AAAAAA;
+}
+
+.fa-check {
+ color: #73804E;
+}
+/* End ClipboardJS edits */
.fa-inverse:hover {
color: #ccc;
diff --git a/_templates/_page_openshift.html.erb b/_templates/_page_openshift.html.erb
index 84bb0cba75..25401f6b17 100644
--- a/_templates/_page_openshift.html.erb
+++ b/_templates/_page_openshift.html.erb
@@ -10,7 +10,8 @@
<%= [topic_title, subgroup_title].compact.join(' - ') %> | <%= group_title %> | <%= distro %> <%= version %>
-
+
+
@@ -146,6 +147,9 @@
+
+
+