add copy button support

automadcms · Apr 1, 2024 · f839892 · f839892
1 parent 0f49950
commit f839892
Show file tree

Hide file tree

Showing 53 changed files with 306 additions and 333 deletions.
diff --git a/README.md b/README.md
@@ -53,6 +53,7 @@ Some basic theme settings are exposed using CSS custom properties. These propert
 :root {
   --am-prism-padding-y: 1rem;
   --am-prism-padding-x: 1rem;
+  --am-prism-border-width: 1px;
   --am-prism-border-radius: 0.3em;
   --am-prism-font-size: 0.875rem;
   --am-prism-font-family: ui-monospace;

diff --git a/index.php b/index.php
@@ -68,6 +68,10 @@
 			rel="stylesheet" 
 			href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css" 
 		/>
+		<link 
+			rel="stylesheet" 
+			href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.css" 
+		/>
 		<link
 			rel="stylesheet"
 			href="themes/base.css"
@@ -82,6 +86,7 @@
 			:root {
 				--am-prism-font-family: "JetBrains Mono";
 				--am-prism-font-size: 1rem;
+				--am-prism-border-width: 1px;
 			}
 
 			.theme-dark {
@@ -135,4 +140,6 @@ class="navbar-item is-size-5 has-text-weight-medium px-0"
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
 </html>
diff --git a/themes/base.css b/themes/base.css
@@ -39,3 +39,47 @@ pre[class*='language-'] .line-numbers-rows {
 	max-height: 100%;
 	overflow: hidden;
 }
+
+.line-numbers.line-numbers .line-numbers-rows {
+	border-right-width: var(--am-prism-border-width, 1px);
+	border-right-color: var(--am-prism-line-numbers-border);
+}
+
+.line-numbers .line-numbers-rows > span:before {
+	color: var(--am-prism-line-numbers-color);
+}
+
+div.code-toolbar > .toolbar {
+	top: 0.3rem !important;
+	right: 0.3rem !important;
+}
+
+div.code-toolbar > .toolbar > .toolbar-item > button.copy-to-clipboard-button {
+	display: inline-flex;
+	padding: 0 0.75em;
+	font-size: var(--am-prism-font-size, 0.8em);
+	font-family: var(--am-prism-font-family, ui-monospace), monospace;
+	font-weight: 600 !important;
+	line-height: 2em;
+	color: var(--am-prism-copy-color);
+	background-color: var(--am-prism-copy-bg);
+	border-radius: calc(var(--am-prism-border-radius, 0.4em) - 0.1em);
+	cursor: pointer;
+	box-shadow: none;
+	opacity: 1;
+	transition: opacity 0.2s;
+}
+
+div.code-toolbar
+	> .toolbar
+	> .toolbar-item
+	> button.copy-to-clipboard-button:hover {
+	opacity: 0.8;
+}
+
+div.code-toolbar
+	> .toolbar
+	> .toolbar-item
+	> button.copy-to-clipboard-button:focus {
+	opacity: 1;
+}
diff --git a/themes/prism-atom-dark.css b/themes/prism-atom-dark.css
@@ -118,10 +118,9 @@ pre[class*='language-'] {
 	font-style: italic;
 }
 
-.line-numbers.line-numbers .line-numbers-rows {
-	border-right-color: #2a2a2a;
-}
-
-.line-numbers .line-numbers-rows > span:before {
-	color: #333333;
+:root {
+	--am-prism-line-numbers-color: #333333;
+	--am-prism-line-numbers-border: #2a2a2a;
+	--am-prism-copy-color: #ededed;
+	--am-prism-copy-bg: #ededed11;
 }
diff --git a/themes/prism-aura-dark.css b/themes/prism-aura-dark.css
@@ -123,10 +123,9 @@ pre[class*='language-'] {
 	font-style: italic;
 }
 
-.line-numbers.line-numbers .line-numbers-rows {
-	border-right-color: #44405933;
-}
-
-.line-numbers .line-numbers-rows > span:before {
-	color: #444059aa;
+:root {
+	--am-prism-line-numbers-color: #444059aa;
+	--am-prism-line-numbers-border: #44405933;
+	--am-prism-copy-color: #f694ff;
+	--am-prism-copy-bg: #44405955;
 }
diff --git a/themes/prism-boola-dark.css b/themes/prism-boola-dark.css
@@ -129,10 +129,9 @@ pre[class*='language-'] {
 	font-style: italic;
 }
 
-.line-numbers.line-numbers .line-numbers-rows {
-	border-right-color: #58577533;
-}
-
-.line-numbers .line-numbers-rows > span:before {
-	color: #58577577;
+:root {
+	--am-prism-line-numbers-color: #58577577;
+	--am-prism-line-numbers-border: #58577533;
+	--am-prism-copy-color: #fda7f7;
+	--am-prism-copy-bg: #58577555;
 }
diff --git a/themes/prism-boola-light.css b/themes/prism-boola-light.css
@@ -34,7 +34,7 @@ code[class*='language-'] ::selection {
 pre[class*='language-'] {
 	color: white;
 	background: #ffffff;
-	border: 1px solid #6e778133;
+	border: var(--am-prism-border-width, 1px) solid #6e778133;
 }
 
 :not(pre) > code[class*='language-'] {
@@ -124,10 +124,9 @@ pre[class*='language-'] {
 	font-style: italic;
 }
 
-.line-numbers.line-numbers .line-numbers-rows {
-	border-right-color: #6e778133;
-}
-
-.line-numbers .line-numbers-rows > span:before {
-	color: #6e778177;
+:root {
+	--am-prism-line-numbers-color: #6e778177;
+	--am-prism-line-numbers-border: #6e778133;
+	--am-prism-copy-color: #0550aedd;
+	--am-prism-copy-bg: #6e778111;
 }
diff --git a/themes/prism-catppuccin-frappe.css b/themes/prism-catppuccin-frappe.css
@@ -142,10 +142,9 @@ pre[class*='language-'] {
 	font-style: italic;
 }
 
-.line-numbers.line-numbers .line-numbers-rows {
-	border-right-color: #73799422;
-}
-
-.line-numbers .line-numbers-rows > span:before {
-	color: #73799466;
+:root {
+	--am-prism-line-numbers-color: #73799466;
+	--am-prism-line-numbers-border: #73799422;
+	--am-prism-copy-color: #c6d0f5;
+	--am-prism-copy-bg: #73799433;
 }
diff --git a/themes/prism-catppuccin-latte.css b/themes/prism-catppuccin-latte.css
@@ -142,10 +142,9 @@ pre[class*='language-'] {
 	font-style: italic;
 }
 
-.line-numbers.line-numbers .line-numbers-rows {
-	border-right-color: #9ca0b033;
-}
-
-.line-numbers .line-numbers-rows > span:before {
-	color: #9ca0b088;
+:root {
+	--am-prism-line-numbers-color: #9ca0b088;
+	--am-prism-line-numbers-border: #9ca0b033;
+	--am-prism-copy-color: #4c4f69dd;
+	--am-prism-copy-bg: #9ca0b033;
 }
diff --git a/themes/prism-catppuccin-macchiato.css b/themes/prism-catppuccin-macchiato.css
@@ -142,10 +142,9 @@ pre[class*='language-'] {
 	font-style: italic;
 }
 
-.line-numbers.line-numbers .line-numbers-rows {
-	border-right-color: #6e738d22;
-}
-
-.line-numbers .line-numbers-rows > span:before {
-	color: #6e738d88;
+:root {
+	--am-prism-line-numbers-color: #6e738d88;
+	--am-prism-line-numbers-border: #6e738d22;
+	--am-prism-copy-color: #c6d0f5;
+	--am-prism-copy-bg: #73799433;
 }
diff --git a/themes/prism-catppuccin-mocha.css b/themes/prism-catppuccin-mocha.css
@@ -142,10 +142,9 @@ pre[class*='language-'] {
 	font-style: italic;
 }
 
-.line-numbers.line-numbers .line-numbers-rows {
-	border-right-color: #6c708617;
-}
-
-.line-numbers .line-numbers-rows > span:before {
-	color: #6c708655;
+:root {
+	--am-prism-line-numbers-color: #6c708655;
+	--am-prism-line-numbers-border: #6c708617;
+	--am-prism-copy-color: #c6d0f5;
+	--am-prism-copy-bg: #73799433;
 }
diff --git a/themes/prism-coldark-cold.css b/themes/prism-coldark-cold.css
@@ -238,7 +238,7 @@ pre[id].linkable-line-numbers.linkable-line-numbers
  * http://prismjs.com/plugins/line-numbers/
  */
 .line-numbers.line-numbers .line-numbers-rows {
-	border-right: 1px solid #8da1b97a;
+	border-right: var(--am-prism-border-width, 1px) solid #8da1b97a;
 	background: #d0dae77a;
 }
 
@@ -290,7 +290,7 @@ pre > code.diff-highlight .token.token.inserted:not(.prefix) {
  * https://prismjs.com/plugins/command-line/
  */
 .command-line .command-line-prompt {
-	border-right: 1px solid #8da1b97a;
+	border-right: var(--am-prism-border-width, 1px) solid #8da1b97a;
 }
 
 .command-line .command-line-prompt > span:before {

diff --git a/themes/prism-coldark-dark.css b/themes/prism-coldark-dark.css
@@ -237,7 +237,7 @@ pre[id].linkable-line-numbers.linkable-line-numbers
  * http://prismjs.com/plugins/line-numbers/
  */
 .line-numbers.line-numbers .line-numbers-rows {
-	border-right: 1px solid #0b121b;
+	border-right: var(--am-prism-border-width, 1px) solid #0b121b;
 	background: #0b121b7a;
 }
 
@@ -289,7 +289,7 @@ pre > code.diff-highlight .token.token.inserted:not(.prefix) {
  * https://prismjs.com/plugins/command-line/
  */
 .command-line .command-line-prompt {
-	border-right: 1px solid #0b121b;
+	border-right: var(--am-prism-border-width, 1px) solid #0b121b;
 }
 
 .command-line .command-line-prompt > span:before {

diff --git a/themes/prism-dark-frost.css b/themes/prism-dark-frost.css
@@ -144,10 +144,9 @@ pre[class*='language-'] {
 	font-style: italic;
 }
 
-.line-numbers.line-numbers .line-numbers-rows {
-	border-right-color: #285e5c44;
-}
-
-.line-numbers .line-numbers-rows > span:before {
-	color: #285e5cbb;
+:root {
+	--am-prism-line-numbers-color: #285e5cbb;
+	--am-prism-line-numbers-border: #285e5c44;
+	--am-prism-copy-color: #e0f6f7;
+	--am-prism-copy-bg: #285e5c33;
 }
diff --git a/themes/prism-dark-space.css b/themes/prism-dark-space.css
@@ -136,10 +136,9 @@ pre[class*='language-'] {
 	font-style: italic;
 }
 
-.line-numbers.line-numbers .line-numbers-rows {
-	border-right-color: #41446b33;
-}
-
-.line-numbers .line-numbers-rows > span:before {
-	color: #41446baa;
+:root {
+	--am-prism-line-numbers-color: #41446baa;
+	--am-prism-line-numbers-border: #41446b33;
+	--am-prism-copy-color: #7bccfc;
+	--am-prism-copy-bg: #41446b55;
 }
diff --git a/themes/prism-dracula.css b/themes/prism-dracula.css
@@ -98,11 +98,9 @@ pre[class*='language-'] {
 	cursor: help;
 }
 
-.line-numbers.line-numbers .line-numbers-rows {
-	border-right-color: #6272a422;
-}
-
-.line-numbers .line-numbers-rows > span:before {
-	text-shadow: none;
-	color: #6272a455;
+:root {
+	--am-prism-line-numbers-color: #6272a455;
+	--am-prism-line-numbers-border: #6272a422;
+	--am-prism-copy-color: #f8f8f2;
+	--am-prism-copy-bg: #6272a444;
 }
diff --git a/themes/prism-duotone-dark.css b/themes/prism-duotone-dark.css
@@ -131,17 +131,6 @@ pre > code.highlight {
 	outline-offset: 0.4em;
 }
 
-/* overrides color-values for the Line Numbers plugin
- * http://prismjs.com/plugins/line-numbers/
- */
-.line-numbers.line-numbers .line-numbers-rows {
-	border-right-color: #2c2937;
-}
-
-.line-numbers .line-numbers-rows > span:before {
-	color: #3c3949;
-}
-
 /* overrides color-values for the Line Highlight plugin
 * http://prismjs.com/plugins/line-highlight/
 */
@@ -158,3 +147,10 @@ pre > code.highlight {
 		rgba(224, 145, 66, 0)
 	);
 }
+
+:root {
+	--am-prism-line-numbers-color: #3c3949;
+	--am-prism-line-numbers-border: #2c2937;
+	--am-prism-copy-color: #c4b9fe;
+	--am-prism-copy-bg: #6c678355;
+}
diff --git a/themes/prism-duotone-earth.css b/themes/prism-duotone-earth.css
@@ -131,17 +131,6 @@ pre > code.highlight {
 	outline-offset: 0.4em;
 }
 
-/* overrides color-values for the Line Numbers plugin
- * http://prismjs.com/plugins/line-numbers/
- */
-.line-numbers.line-numbers .line-numbers-rows {
-	border-right-color: #35302b;
-}
-
-.line-numbers .line-numbers-rows > span:before {
-	color: #46403d;
-}
-
 /* overrides color-values for the Line Highlight plugin
 * http://prismjs.com/plugins/line-highlight/
 */
@@ -158,3 +147,10 @@ pre > code.highlight {
 		rgba(191, 160, 90, 0)
 	);
 }
+
+:root {
+	--am-prism-line-numbers-color: #46403d;
+	--am-prism-line-numbers-border: #35302b;
+	--am-prism-copy-color: #fff3eb;
+	--am-prism-copy-bg: #6a5f5855;
+}
diff --git a/themes/prism-duotone-forest.css b/themes/prism-duotone-forest.css
@@ -130,18 +130,6 @@ pre > code.highlight {
 	outline: 0.4em solid #5c705c;
 	outline-offset: 0.4em;
 }
-
-/* overrides color-values for the Line Numbers plugin
- * http://prismjs.com/plugins/line-numbers/
- */
-.line-numbers.line-numbers .line-numbers-rows {
-	border-right-color: #2c302c;
-}
-
-.line-numbers .line-numbers-rows > span:before {
-	color: #3b423b;
-}
-
 /* overrides color-values for the Line Highlight plugin
 * http://prismjs.com/plugins/line-highlight/
 */
@@ -158,3 +146,10 @@ pre > code.highlight {
 		rgba(162, 179, 77, 0)
 	);
 }
+
+:root {
+	--am-prism-line-numbers-color: #3b423b;
+	--am-prism-line-numbers-border: #2c302c;
+	--am-prism-copy-color: #b3d6b3;
+	--am-prism-copy-bg: #535f5355;
+}