diff --git a/src/components/render/code/HighlightCode.tsx b/src/components/render/code/HighlightCode.tsx index 310e7d11..5a4c812f 100755 --- a/src/components/render/code/HighlightCode.tsx +++ b/src/components/render/code/HighlightCode.tsx @@ -1,12 +1,16 @@ -import { ActionIcon, CopyButton, Paper, ScrollArea, Text, useMantineTheme } from '@mantine/core'; -import { IconCheck, IconClipboardCopy } from '@tabler/icons-react'; +import { ActionIcon, Button, CopyButton, Paper, ScrollArea, Text, useMantineTheme } from '@mantine/core'; +import { IconCheck, IconClipboardCopy, IconChevronDown, IconChevronUp } from '@tabler/icons-react'; import hljs from 'highlight.js'; +import { useState } from 'react'; export default function HighlightCode({ language, code }: { language: string; code: string }) { const theme = useMantineTheme(); + const [expanded, setExpanded] = useState(false); const lines = code.split('\n'); const lineNumbers = lines.map((_, i) => i + 1); + const displayLines = expanded ? lines : lines.slice(0, 50); + const displayLineNumbers = expanded ? lineNumbers : lineNumbers.slice(0, 50); if (!hljs.getLanguage(language)) { language = 'text'; @@ -35,7 +39,7 @@ export default function HighlightCode({ language, code }: { language: string; co
           
-            {lines.map((line, i) => (
+            {displayLines.map((line, i) => (
               
- {lineNumbers[i]} + {displayLineNumbers[i]}
+ + {lines.length > 50 && ( + + )} ); }