✨ add copy button for code block

mickm3n · Jul 28, 2024 · 65755c8 · 65755c8
1 parent 749fd8e
commit 65755c8
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/config.toml b/config.toml
@@ -27,3 +27,6 @@ external_links_no_referrer = true
 paths = "off"
 taxonomies = "on"
 anchors = "off"
+
+[extra]
+js_bundle_name = ["copy-code-button.js"]
diff --git a/static/site/styles/site.css b/static/site/styles/site.css
@@ -176,12 +176,14 @@ strong {
 }
 
 pre {
+  position: relative;
   color: rgb(57, 58, 52);
   background-color: var(--colors-code-background);
   margin: 0 1rem;
   padding: 1rem;
   border-radius: 0.5rem;
   overflow: auto;
+  padding-top: 2.5em;
 }
 
 code {
@@ -206,6 +208,18 @@ code td {
   padding-left: 1rem;
 }
 
+.copy-code-button {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  padding: 3px 8px;
+  font-size: 0.8em;
+  background-color: #f1f1f1;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
 hr {
   display: block;
   height: 1px;

diff --git a/templates/base.html b/templates/base.html
@@ -39,6 +39,7 @@
     <meta property="og:url" content="{{ current_url }}" />
     <meta name="twitter:card" content="{{ twitter_card }}" />
     <script src="{{ get_url(path="js/tablesort.min.js", cachebust=true) }}"></script>
+    <script src="{{ get_url(path="js/copy-code-button.js") | safe }}"></script>
     <link rel="icon" href="{{ get_url(path="images/favicon.ico", cachebust=true) }}" type="image/x-icon" />
     <link rel="stylesheet" href="{{ get_url(path="site/styles/w3.css", trailing_slash=false, cachebust=true) | safe }}">
     <link rel="stylesheet"