feat: customizable code block font size (#56)

Author: josStorer

src/components/MarkdownRender/Pre.jsx

@@ -0,0 +1,43 @@
+import { useEffect, useRef, useState } from 'react'
+import CopyButton from '../CopyButton'
+import PropTypes from 'prop-types'
+import { changeChildrenFontSize } from '../../utils'
+
+export function Pre({ className, children }) {
+  const preRef = useRef(null)
+  const [fontSize, setFontSize] = useState(14)
+  const sizeList = [10, 12, 14, 16, 18]
+
+  useEffect(() => {
+    changeChildrenFontSize(preRef.current.childNodes[1], fontSize + 'px')
+  })
+
+  return (
+    <pre className={className} ref={preRef} style={{ position: 'relative' }}>
+      <span className="code-corner-util gpt-util-group">
+        <select
+          className="normal-button"
+          required
+          onChange={(e) => {
+            setFontSize(e.target.value)
+          }}
+        >
+          {Object.values(sizeList).map((size) => {
+            return (
+              <option value={size} key={size} selected={size === fontSize}>
+                {size}px
+              </option>
+            )
+          })}
+        </select>
+        <CopyButton contentFn={() => preRef.current.childNodes[1].textContent} size={14} />
+      </span>
+      {children}
+    </pre>
+  )
+}
+
+Pre.propTypes = {
+  className: PropTypes.string.isRequired,
+  children: PropTypes.object.isRequired,
+}

src/components/MarkdownRender/markdown-without-katex.jsx

@@ -3,28 +3,7 @@ import rehypeRaw from 'rehype-raw'
 import rehypeHighlight from 'rehype-highlight'
 import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
-import CopyButton from '../CopyButton'
-import { useRef } from 'react'
-import PropTypes from 'prop-types'
-
-function Pre({ className, children }) {
-  const preRef = useRef(null)
-  return (
-    <pre className={className} ref={preRef} style="position: relative;">
-      <CopyButton
-        className="code-copy-btn"
-        contentFn={() => preRef.current.textContent}
-        size={14}
-      />
-      {children}
-    </pre>
-  )
-}
-
-Pre.propTypes = {
-  className: PropTypes.string.isRequired,
-  children: PropTypes.object.isRequired,
-}
+import { Pre } from './Pre'
 
 export function MarkdownRender(props) {
   const linkProperties = {

src/components/MarkdownRender/markdown.jsx

@@ -6,28 +6,7 @@ import rehypeKatex from 'rehype-katex'
 import remarkMath from 'remark-math'
 import remarkGfm from 'remark-gfm'
 import remarkBreaks from 'remark-breaks'
-import CopyButton from '../CopyButton'
-import { useRef } from 'react'
-import PropTypes from 'prop-types'
-
-function Pre({ className, children }) {
-  const preRef = useRef(null)
-  return (
-    <pre className={className} ref={preRef} style="position: relative;">
-      <CopyButton
-        className="code-copy-btn"
-        contentFn={() => preRef.current.textContent}
-        size={14}
-      />
-      {children}
-    </pre>
-  )
-}
-
-Pre.propTypes = {
-  className: PropTypes.string.isRequired,
-  children: PropTypes.object.isRequired,
-}
+import { Pre } from './Pre'
 
 export function MarkdownRender(props) {
   const linkProperties = {

src/content-script/styles.scss

@@ -112,11 +112,32 @@
     animation: chatgptbox-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
 
-  .code-copy-btn {
+  .code-corner-util {
     color: inherit;
     position: absolute;
     right: 10px;
     top: 3px;
+  }
+
+  .gpt-util-group {
+    display: flex;
+    gap: 15px;
+    align-items: center;
+  }
+
+  .gpt-util-icon {
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+  }
+
+  .normal-button {
+    padding: 1px 6px;
+    border: 1px solid;
+    border-color: var(--theme-border-color);
+    background-color: var(--theme-color);
+    color: var(--font-color);
+    border-radius: 5px;
     cursor: pointer;
   }
 
@@ -127,6 +148,7 @@
     word-break: break-word;
     pre {
       margin-top: 10px;
+      padding: 0;
     }
 
     & > p {
@@ -168,28 +190,6 @@
     .gpt-feedback-selected {
       color: #f08080;
     }
-
-    .gpt-util-group {
-      display: flex;
-      gap: 15px;
-      align-items: center;
-    }
-
-    .gpt-util-icon {
-      display: flex;
-      cursor: pointer;
-      align-items: center;
-    }
-
-    .normal-button {
-      padding: 1px 6px;
-      border: 1px solid;
-      border-color: var(--theme-border-color);
-      background-color: var(--theme-color);
-      color: var(--font-color);
-      border-radius: 5px;
-      cursor: pointer;
-    }
   }
 
   .error {

src/utils/change-children-font-size.mjs

@@ -0,0 +1,10 @@
+export function changeChildrenFontSize(element, size) {
+  try {
+    element.style.fontSize = size
+  } catch {
+    /* empty */
+  }
+  for (let i = 0; i < element.childNodes.length; i++) {
+    changeChildrenFontSize(element.childNodes[i], size)
+  }
+}

src/utils/index.mjs

@@ -1,3 +1,4 @@
+export * from './change-children-font-size'
 export * from './create-element-at-position'
 export * from './crop-text'
 export * from './ends-with-question-mark'