better code chunck

holtzy · Jul 18, 2024 · 7a19b90 · 7a19b90
1 parent 50022c1
commit 7a19b90
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 54 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
     "gatsby-source-filesystem": "^5.10.0",
     "gatsby-transformer-sharp": "^5.10.0",
     "katex": "^0.16.10",
+    "lucide-react": "^0.408.0",
     "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-bootstrap": "^2.7.4",

diff --git a/src/components/CodeChunk.js b/src/components/CodeChunk.js
@@ -1,25 +1,43 @@
-import React from 'react';
+import './codeChunk.css';
+
+import React, { useState } from 'react';
 import Prism from '../prism/prism';
 import '../prism/prism.css';
+import { Clipboard } from 'lucide-react';
 
 export default function CodeChunk({ children, hasWhiteBackground = false }) {
+  const [isCopied, setIsCopied] = useState(false);
+
   React.useEffect(() => {
     Prism.highlightAll();
-  }, []);
+  }, [children]);
+
+  const copyButton = (
+    <div
+      onClick={() => {
+        navigator.clipboard.writeText(children);
+        setIsCopied(true);
+      }}
+      className="codeChunckCopyButton"
+    >
+      {isCopied ? 'Copied' : <Clipboard size={14} style={{ padding: 0 }} />}
+    </div>
+  );
 
   return (
-    <div>
+    <div style={{ position: 'relative' }} title="Copy code to clipboard">
       <pre style={{ backgroundColor: hasWhiteBackground ? 'white' : '' }}>
         <code
           style={{
             outline: '0px solid transparent',
             backgroundColor: hasWhiteBackground ? 'white' : '',
           }}
-          className={`language-javascript`}
+          className="language-python"
         >
           {children}
         </code>
       </pre>
+      <div className="copyButtonContainer">{copyButton}</div>
     </div>
   );
 }
diff --git a/src/components/FunctionExploration.js b/src/components/FunctionExploration.js
@@ -100,7 +100,7 @@ export default function FunctionExploration({ funDetails }) {
             )}
 
             <p className="argumentSectionTitle">Code Example</p>
-            <div style={{ fontSize: 12, backgroundColor: 'white' }}>
+            <div style={{ backgroundColor: 'white' }}>
               <CodeChunk hasWhiteBackground>
                 {selectedParameterInfo.options
                   ? selectedParameterInfo.basicUsage.replace(

diff --git a/src/components/codeChunk.css b/src/components/codeChunk.css
@@ -0,0 +1,25 @@
+.codeChunckCopyButton {
+  color: grey;
+  border: solid grey 1px;
+  border-radius: 5px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-right: 6px;
+  padding-left: 6px;
+  opacity: 0.5;
+  cursor: pointer;
+  line-height: 20px;
+  font-size: 12px;
+}
+
+.codeChunckCopyButton:hover {
+  opacity: 1;
+}
+
+.copyButtonContainer {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  margin-right: 4px;
+  margin-top: 4px;
+}
diff --git a/src/prism/prism.css b/src/prism/prism.css
@@ -30,71 +30,75 @@ cyan      #2aa198
 green     #859900
 */
 
-code[class*="language-"],
-pre[class*="language-"] {
-	color: #657b83; /* base00 */
-	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-	font-size: 1em;
-	text-align: left;
-	white-space: pre;
-	word-spacing: normal;
-	word-break: normal;
-	word-wrap: normal;
+code[class*='language-'],
+pre[class*='language-'] {
+  color: #657b83; /* base00 */
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  font-size: 0.9em;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
 
-	line-height: 1.5;
+  line-height: 1.5;
 
-	-moz-tab-size: 4;
-	-o-tab-size: 4;
-	tab-size: 4;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
 
-	-webkit-hyphens: none;
-	-moz-hyphens: none;
-	-ms-hyphens: none;
-	hyphens: none;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
 }
 
-pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
-code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-	background: #073642; /* base02 */
+pre[class*='language-']::-moz-selection,
+pre[class*='language-'] ::-moz-selection,
+code[class*='language-']::-moz-selection,
+code[class*='language-'] ::-moz-selection {
+  background: #d7d6d6; /* base02 */
 }
 
-pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
-code[class*="language-"]::selection, code[class*="language-"] ::selection {
-	background: #073642; /* base02 */
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection,
+code[class*='language-']::selection,
+code[class*='language-'] ::selection {
+  background: #d7d6d6; /* base02 */
 }
 
 /* Code blocks */
-pre[class*="language-"] {
-	padding: 1em;
-	margin: .5em 0;
-	overflow: auto;
-	border-radius: 0.3em;
+pre[class*='language-'] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+  border-radius: 0.3em;
 }
 
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
-	background-color: var(--light-grey); /* base3 */
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+  background-color: var(--light-grey); /* base3 */
 }
 
 /* Inline code */
-:not(pre) > code[class*="language-"] {
-	padding: .1em;
-	border-radius: .3em;
+:not(pre) > code[class*='language-'] {
+  padding: 0.1em;
+  border-radius: 0.3em;
 }
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
-	color: #93a1a1; /* base1 */
+  color: #93a1a1; /* base1 */
 }
 
 .token.punctuation {
-	color: #586e75; /* base01 */
+  color: #586e75; /* base01 */
 }
 
 .token.namespace {
-	opacity: .7;
+  opacity: 0.7;
 }
 
 .token.property,
@@ -104,7 +108,7 @@ pre[class*="language-"] {
 .token.constant,
 .token.symbol,
 .token.deleted {
-	color: #268bd2; /* blue */
+  color: #268bd2; /* blue */
 }
 
 .token.selector,
@@ -114,40 +118,39 @@ pre[class*="language-"] {
 .token.builtin,
 .token.url,
 .token.inserted {
-	color: #2aa198; /* cyan */
+  color: #2aa198; /* cyan */
 }
 
 .token.entity {
-	color: #657b83; /* base00 */
-	background: #eee8d5; /* base2 */
+  color: #657b83; /* base00 */
+  background: #eee8d5; /* base2 */
 }
 
 .token.atrule,
 .token.attr-value,
 .token.keyword {
-	color: #859900; /* green */
+  color: #859900; /* green */
 }
 
 .token.function,
 .token.class-name {
-	color: #b58900; /* yellow */
+  color: #b58900; /* yellow */
 }
 
 .token.regex,
 .token.important,
 .token.variable {
-	color: #cb4b16; /* orange */
+  color: #cb4b16; /* orange */
 }
 
 .token.important,
 .token.bold {
-	font-weight: bold;
+  font-weight: bold;
 }
 .token.italic {
-	font-style: italic;
+  font-style: italic;
 }
 
 .token.entity {
-	cursor: help;
+  cursor: help;
 }
-