tj

app/components/markdown.tsx

@@ -122,9 +122,29 @@ export function PreCode(props: { children: any }) {
     }
   }, []);
 
+  const [collapsed, setCollapsed] = useState(true);
+  const [showToggle, setShowToggle] = useState(false);
+
+  useEffect(() => {
+    if (ref.current) {
+      // 获取代码块的实际高度
+      const screenHeight = window.innerHeight;
+      const codeHeight = ref.current.scrollHeight;
+      setShowToggle(codeHeight > screenHeight * 0.3);
+    }
+  }, [props.children]);
+
+  const toggleCollapsed = () => {
+    setCollapsed(!collapsed);
+  };
+  console.log(props.children);
+
   return (
     <>
-      <pre ref={ref}>
+      <pre
+        ref={ref}
+        style={{ maxHeight: collapsed ? "30vh" : "none", overflow: "hidden" }}
+      >
         <span
           className="copy-code-button"
           onClick={() => {
@@ -135,6 +155,15 @@ export function PreCode(props: { children: any }) {
           }}
         ></span>
         {props.children}
+        {showToggle && collapsed && (
+          <p
+            style={{ margin: 0 }}
+            className="show-hide-button"
+            onClick={toggleCollapsed}
+          >
+            展开全部
+          </p>
+        )}
       </pre>
       {mermaidCode.length > 0 && (
         <Mermaid code={mermaidCode} key={mermaidCode} />

app/styles/globals.scss

@@ -272,7 +272,6 @@ div.math {
 
 pre {
   position: relative;
-
   &:hover .copy-code-button {
     pointer-events: all;
     transform: translateX(0px);
@@ -302,6 +301,17 @@ pre {
       opacity: 1;
     }
   }
+  .show-hide-button {
+     width: 100%;
+     height: 20px;
+     line-height: 20px;
+     position: absolute;
+     text-align: center;
+     bottom: 0;
+     cursor: pointer;
+     color: white;
+     background: linear-gradient(rgba(0,0,0,.3), #1a1b26); 
+  }
 }
 
 .clickable {