diff --git a/package-lock.json b/package-lock.json
index ebd9c1c..957f8dc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
"@types/marked": "^4.0.8",
"bulma": "^0.9.4",
"bulma-prefers-dark": "^0.1.0-beta.1",
+ "copy-to-clipboard": "^3.3.3",
"postcss": "^8.4.21",
"sass": "^1.58.3",
"svelte": "^3.55.1",
@@ -627,6 +628,15 @@
"integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
"dev": true
},
+ "node_modules/copy-to-clipboard": {
+ "version": "3.3.3",
+ "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+ "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+ "dev": true,
+ "dependencies": {
+ "toggle-selection": "^1.0.6"
+ }
+ },
"node_modules/cssesc": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1583,6 +1593,12 @@
"node": ">=8.0"
}
},
+ "node_modules/toggle-selection": {
+ "version": "1.0.6",
+ "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+ "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==",
+ "dev": true
+ },
"node_modules/tslib": {
"version": "2.5.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
diff --git a/package.json b/package.json
index 39e5663..753baec 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
"@types/marked": "^4.0.8",
"bulma": "^0.9.4",
"bulma-prefers-dark": "^0.1.0-beta.1",
+ "copy-to-clipboard": "^3.3.3",
"postcss": "^8.4.21",
"sass": "^1.58.3",
"svelte": "^3.55.1",
diff --git a/src/app.scss b/src/app.scss
index b3f53d4..6c06683 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -83,4 +83,4 @@ $modal-background-background-color-dark: rgba($dark, 0.86) !default; // remove t
@import "/node_modules/bulma-prefers-dark/build/bulma-prefers-dark.sass";
.modal-card-body { // remove this once https: //github.com/jloh/bulma-prefers-dark/pull/90 is merged and released
background-color: $background-dark;
-}
\ No newline at end of file
+}
diff --git a/src/lib/Code.svelte b/src/lib/Code.svelte
index cddd000..067be2b 100644
--- a/src/lib/Code.svelte
+++ b/src/lib/Code.svelte
@@ -7,6 +7,9 @@
// Style depends on system theme
const style = window.matchMedia("(prefers-color-scheme: dark)").matches ? githubDark : github;
+ // Copy function for the code block
+ import copy from "copy-to-clipboard";
+
// Import all supported languages
import {
javascript,
@@ -68,10 +71,47 @@
default:
language = plaintext;
}
+
+ // For copying code - reference: https://vyacheslavbasharov.com/blog/adding-click-to-copy-code-markdown-blog
+ const copyFunction = (event) => {
+ // Get the button the user clicked on
+ const clickedElement = event.target as HTMLButtonElement;
+
+ // Get the next element
+ const nextElement = clickedElement.nextElementSibling;
+
+ // Modify the appearance of the button
+ const originalButtonContent = clickedElement.innerHTML;
+ clickedElement.classList.add("is-success");
+ clickedElement.innerHTML = "Copied!";
+
+ // Retrieve the code in the code block
+ const codeBlock = (nextElement.querySelector("pre > code") as HTMLPreElement).innerText;
+ copy(codeBlock);
+
+ // Restored the button after copying the text in 1 second.
+ setTimeout(() => {
+ clickedElement.innerHTML = originalButtonContent;
+ clickedElement.classList.remove("is-success");
+ clickedElement.blur();
+ }, 1000);
+ };