feat: customizable code block font size (#56)

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 = {