fix: copy text (#978)

Author: vzsky

src/components/Code.tsx

@@ -14,32 +14,34 @@ export interface CodeBlockProps {
   maxHeight?: string
 }
 
-// Direct port of https://github.com/programming-in-th/programming.in.th/blob/main/src/components/Code.tsx
-// May cause bug
 const Code = ({ code, language, maxHeight = 'auto' }: CodeBlockProps) => {
   return (
     <div className="py-2">
       <Highlight Prism={Prism} code={code} language={language as Language}>
         {({ style, tokens, getLineProps, getTokenProps }) => (
-          <pre
+          <div
             style={{ ...style, maxHeight }}
             className={`language-${language} overflow-y-auto rounded-lg text-[13.6px]`}
           >
             <code className={`language-${language}`}>
               {tokens.map((line, i) => (
-                <tr key={i} {...getLineProps({ line, key: i })}>
-                  <td className="w-8 select-none pr-2 text-gray-500">
+                <div
+                  key={i}
+                  {...getLineProps({ line, key: i })}
+                  className="flex"
+                >
+                  <span className="w-8 select-none pr-2 text-gray-500">
                     {i + 1}
-                  </td>
-                  <td>
+                  </span>
+                  <span className="flex-1">
                     {line.map((token, key) => (
                       <span key={key} {...getTokenProps({ token, key })} />
                     ))}
-                  </td>
-                </tr>
+                  </span>
+                </div>
               ))}
             </code>
-          </pre>
+          </div>
         )}
       </Highlight>
     </div>

src/styles/index.css

@@ -14,7 +14,7 @@ svg {
  * Based on copypasta from Remy Bach and Sarah Drasner
  */
 code[class*='language-'],
-pre[class*='language-'] {
+div[class*='language-'] {
   color: white;
   background: #011627;
   font-family:
@@ -46,32 +46,32 @@ pre[class*='language-'] {
 }
 
 /* Code blocks */
-pre[class*='language-'] {
+div[class*='language-'] {
   overflow: auto;
   margin: 0.5em 0;
   padding: 1.3125rem;
   font-size: 14px;
 }
 
-pre[class*='language-']::-moz-selection {
+div[class*='language-']::-moz-selection {
   /* Firefox */
   background: hsl(207, 4%, 16%);
 }
 
-pre[class*='language-']::selection {
+div[class*='language-']::selection {
   /* Safari */
   background: hsl(207, 4%, 16%);
 }
 
 /* Text Selection colour */
-pre[class*='language-']::-moz-selection,
-pre[class*='language-'] ::-moz-selection {
+div[class*='language-']::-moz-selection,
+div[class*='language-'] ::-moz-selection {
   text-shadow: none;
   background: hsla(0, 0%, 100%, 0.15);
 }
 
-pre[class*='language-']::selection,
-pre[class*='language-'] ::selection {
+div[class*='language-']::selection,
+div[class*='language-'] ::selection {
   text-shadow: none;
   background: hsla(0, 0%, 100%, 0.15);
 }