diff --git a/src/components/MDXComponents.tsx b/src/components/MDXComponents.tsx index 4dfef53f22..669efb3c3c 100644 --- a/src/components/MDXComponents.tsx +++ b/src/components/MDXComponents.tsx @@ -1,11 +1,7 @@ import { Flex, Heading, Link, Stack, Table, Text, useColorMode } from '@chakra-ui/react'; import NextLink from 'next/link'; import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'; -import { - nightOwl, - materialLight, - materialDark -} from 'react-syntax-highlighter/dist/cjs/styles/prism'; +import { nightOwl, prism } from 'react-syntax-highlighter/dist/cjs/styles/prism'; import bash from 'react-syntax-highlighter/dist/cjs/languages/prism/bash'; import go from 'react-syntax-highlighter/dist/cjs/languages/prism/go'; @@ -36,19 +32,10 @@ SyntaxHighlighter.registerLanguage('swift', swift); const { header1, header2, header3, header4 } = textStyles; -const Code = ({ className, ...code }: any) => { +const Code = ({ className, children, ...code }: any) => { const { colorMode } = useColorMode(); const isDark = colorMode === 'dark'; - if (className?.includes('terminal')) - return ( - - {code.children} - - ); + const isTerminal = className?.includes('terminal') ; if (code.inline) return ( { fontSize='sm' overflowY='scroll' > - {code.children[0]} + {children[0]} ); - if (className?.startsWith('language-')) + if (className?.startsWith('language-')) { return ( - {code.children} + {children} ); - return {code.children[0]}; + } + return {children[0]}; }; const MDXComponents = { @@ -129,20 +117,6 @@ const MDXComponents = { ); }, // lists - ul: ({ children }: any) => { - return ( - - {children} - - ); - }, - ol: ({ children }: any) => { - return ( - - {children} - - ); - }, // tables table: ({ children }: any) => ( diff --git a/src/utils/getProgrammingLanguageName.ts b/src/utils/getProgrammingLanguageName.ts index 1201f3e862..2224fc2d7a 100644 --- a/src/utils/getProgrammingLanguageName.ts +++ b/src/utils/getProgrammingLanguageName.ts @@ -1,5 +1,6 @@ const CLASSNAME_PREFIX = 'language-'; const DEFAULT = 'bash'; +const TERMINAL = 'terminal'; const JS = ['javascript', 'js', 'jsx', 'ts', 'tsx']; const SH = ['sh', 'shell']; const PY = ['python', 'py']; @@ -13,6 +14,7 @@ export const getProgrammingLanguageName = (code: string) => { const hasLanguageNameProperty = code.startsWith(CLASSNAME_PREFIX); if (!hasLanguageNameProperty) return DEFAULT; const newCode = code.replace(CLASSNAME_PREFIX, '').toLowerCase(); + if (newCode === TERMINAL) return DEFAULT; for (const lang of LANGS) { if (lang.includes(code.toLowerCase())) return lang[0]; }