gitea-mirror/zipline
1
0
Fork 0
mirror of https://github.com/diced/zipline.git synced 2025-12-05 20:40:12 -08:00
Code Issues Packages Projects Releases Wiki Activity

fix: long code blocks (#823) (#810)

Browse Source
This commit is contained in:
curet
2025-07-01 19:58:25 +02:00
committed by GitHub
parent ef33fcbe1d
commit 5c0830c6da
1 changed files with 20 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/render/code/HighlightCode.tsx
View File

@@ -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
<ScrollArea type='auto' dir='ltr' offsetScrollbars={false}>
<pre style={{ margin: 0 }} className='theme'>
<code className='theme'>
{lines.map((line, i) => (
{displayLines.map((line, i) => (
<div key={i}>
<Text
component='span'
@@ -44,7 +48,7 @@ export default function HighlightCode({ language, code }: { language: string; co
mr='md'
style={{ userSelect: 'none', fontFamily: 'monospace' }}
>
{lineNumbers[i]}
{displayLineNumbers[i]}
</Text>
<span
className='line'
@@ -57,6 +61,18 @@ export default function HighlightCode({ language, code }: { language: string; co
</code>
</pre>
</ScrollArea>
{lines.length > 50 && (
<Button
variant='outline'
size='compact-sm'
onClick={() => setExpanded(!expanded)}
leftSection={expanded ? <IconChevronUp size='1rem' /> : <IconChevronDown size='1rem' />}
style={{ position: 'absolute', bottom: '0.5rem', right: '0.5rem' }}
>
{expanded ? 'Show Less' : `Show More (${lines.length - 50} more lines)`}
</Button>
)}
</Paper>
);
}