(DEPLOY) Add Clipboard Button to Code Blocks

Author: GeorgeBerdovskiy

app/assets/stylesheets/application.css

@@ -116,7 +116,13 @@ blockquote {
     border-left: 3px solid #9ca3af;
 }
 
+.code-block {
+	position: relative;
+}
+
 .highlight {
+	padding-right: 40px;
+
 	background-color: rgba(var(--color-light-gray), 0.5);
 	border: 1px solid rgba(var(--color-light-gray), 1);
 	border-radius: 2px;
@@ -132,6 +138,27 @@ blockquote {
 	width: fit-content;
 }
 
+.clipboard-button {
+	position: absolute;
+    top: 8px;
+    right: 8px;
+    background: none;
+    border: 1px solid #cacfd2;
+    border-radius: 4px;
+    width: 24px;
+    height: 24px;
+
+	padding: 0;
+	line-height: 24px;
+
+	cursor: pointer;
+	transition: 0.25s all ease;
+}
+
+.clipboard-button:hover {
+	background-color: #cacfd2;
+}
+
 /* SIDEBAR */
 .logo-container {
 	width: 100%;
@@ -345,6 +372,7 @@ h1.centered {
 	transform: translateX(100%);
 	opacity: 0;
 	transition: 0.25s all ease;
+	z-index: 2;
 }
 
 .mobile-sidebar.visible {

app/controllers/articles_controller.rb

@@ -6,7 +6,18 @@
 class ArticlesController < ApplicationController
   class HTMLwithPygments < Redcarpet::Render::HTML
       def block_code(code, language)
-          Pygments.highlight(code, lexer: language)
+        puts code
+        result = Pygments.highlight(code, lexer: language)
+        result = "<div class=\"code-block\">
+          #{result}
+          <button class=\"clipboard-button\" onclick=\"
+            parent = this.parentElement;
+            content = parent.getElementsByClassName('highlight')[0].textContent;
+            navigator.clipboard.writeText(content);
+          \">📋</button>
+        </div>"
+        result
+        
       end
   end