Gnarwhal/motto
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 1 Packages 1 Wiki Activity Actions

Don't try and highlight plain text

Browse source
This commit is contained in:
Gnarwhal 2024-09-24 23:44:15 +00:00
parent f1bdfaade9
commit 2bac7f434e
Signed by: Gnarwhal
GPG key ID: 0989A73D8C421174
2 changed files with 26 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/app/[...file]/components/types/text.css.ts
View file

@ -21,9 +21,12 @@ export const group = style({
export const line_numbers = style({ export const line_numbers = style({
margin: '0', margin: '0',
marginRight: '0.5em', marginRight: '1em',
paddingRight: '0.5em',
color: colors.foreground2, color: colors.foreground2,
textAlign: 'right', textAlign: 'right',
userSelect: 'none', userSelect: 'none',
}); });
export const plain = style({
margin: 0,
});

39
src/app/[...file]/components/types/text.tsx
View file

@ -38,7 +38,6 @@ const type_map = {
json: 'json', json: 'json',
md: 'markdown', md: 'markdown',
markdown: 'markdown', markdown: 'markdown',
none: 'none',
} }
export function map_to_type(extension?: string) { export function map_to_type(extension?: string) {
@ -68,24 +67,28 @@ export default function Text({ language, text, line_numbers }: { language: strin
}; };
}); });
console.log(language, language in type_map);
return <div className={style.group}> return <div className={style.group}>
{line_numbers ? <p className={style.line_numbers}>{lines.map((_, index) => `${index}\n`)}</p> : <></>} {line_numbers ? <p className={style.line_numbers}>{lines.map((_, index) => `${index}\n`)}</p> : <></>}
<Highlight {language in type_map ?
theme={themes[light_theme ? 'nightOwlLight' : 'oneDark']} <Highlight
code={text} theme={themes[light_theme ? 'nightOwlLight' : 'oneDark']}
language={language} code={text}
> language={language}
{({ tokens, getLineProps, getTokenProps }) => ( >
<div> {({ tokens, getLineProps, getTokenProps }) => (
{tokens.map((line, i) => ( <div>
<div key={i} {...getLineProps({ line })}> {tokens.map((line, i) => (
{line.map((token, key) => ( <div key={i} {...getLineProps({ line })}>
<span key={key} {...getTokenProps({ token })} /> {line.map((token, key) => (
))} <span key={key} {...getTokenProps({ token })} />
</div> ))}
))} </div>
</div> ))}
)} </div>
</Highlight> )}
</Highlight> :
<p className={style.plain}>{text}</p>
}
</div>; </div>;
} }