revert: "refactor(website): use mantine code blocks" (#8514)

This commit is contained in:
Noel
2022-08-17 23:04:47 +02:00
committed by GitHub
parent 0bf3df30da
commit 872ce801a0
4 changed files with 23 additions and 38 deletions

View File

@@ -1,8 +1,9 @@
import { Group, Stack, Title, Text, Box } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import { Prism } from '@mantine/prism';
import type { ReactNode } from 'react';
import { VscListSelection, VscSymbolParameter } from 'react-icons/vsc';
import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
import { HyperlinkedText } from './HyperlinkedText';
import { Section } from './Section';
import { TypeParamTable } from './TypeParamTable';
@@ -50,9 +51,14 @@ export function DocContainer({
</Section>
<Box px="xs" pb="xs">
<Prism language="typescript" colorScheme="dark">
<SyntaxHighlighter
wrapLongLines
language="typescript"
style={vscDarkPlus}
codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
>
{excerpt}
</Prism>
</SyntaxHighlighter>
</Box>
{extendsTokens?.length ? (

View File

@@ -1,9 +1,9 @@
import { Anchor, Box, Code, Text } from '@mantine/core';
import { Prism } from '@mantine/prism';
import { Anchor, Box, Text } from '@mantine/core';
import { DocNodeKind, StandardTags } from '@microsoft/tsdoc';
import Link from 'next/link';
import type { Language } from 'prism-react-renderer';
import type { ReactNode } from 'react';
import { PrismAsyncLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
import { BlockComment } from './BlockComment';
import type { DocBlockJSON } from '~/DocModel/comment/CommentBlock';
import type { AnyDocNodeJSON } from '~/DocModel/comment/CommentNode';
@@ -61,17 +61,24 @@ export function TSDoc({ node }: { node: AnyDocNodeJSON }): JSX.Element {
case DocNodeKind.CodeSpan: {
const { code } = node as DocFencedCodeJSON;
return (
<Code key={idx} className="inline text-sm font-mono">
<pre key={idx} className="inline">
{code}
</Code>
</pre>
);
}
case DocNodeKind.FencedCode: {
const { language, code } = node as DocFencedCodeJSON;
return (
<Prism key={idx} language={language as Language} withLineNumbers colorScheme="dark">
<SyntaxHighlighter
key={idx}
wrapLines
wrapLongLines
language={language}
style={vscDarkPlus}
codeTagProps={{ style: { fontFamily: 'JetBrains Mono' } }}
>
{code}
</Prism>
</SyntaxHighlighter>
);
}
case DocNodeKind.Block: {