+
+export default function ContainerWrapper(props: Props): JSX.Element {
+ return (
+ <>
+
+
+ )
+}
diff --git a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Container/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Container/styles.module.css
index fc2f91d..4e63faa 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Container/styles.module.css
+++ b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Container/styles.module.css
@@ -3,4 +3,5 @@
color: var(--prism-color);
margin-bottom: var(--ifm-leading);
border: 1px solid rgb(var(--lsd-border-primary));
+ border-radius: 0;
}
diff --git a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/Element.js b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/Element.js
deleted file mode 100644
index a094c77..0000000
--- a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/Element.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react'
-import clsx from 'clsx'
-import Container from '@theme/CodeBlock/Container'
-import styles from './styles.module.css'
-// tags in markdown map to CodeBlocks. They may contain JSX children. When
-// the children is not a simple string, we just return a styled block without
-// actually highlighting.
-export default function CodeBlockJSX({ children, className }) {
- return (
-
- {children}
-
- )
-}
diff --git a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/String.tsx b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/String.tsx
index dcd43f2..3ad9aca 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/String.tsx
+++ b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/String.tsx
@@ -1,6 +1,6 @@
import React from 'react'
import clsx from 'clsx'
-import { useThemeConfig } from '@docusaurus/theme-common'
+import { useThemeConfig, usePrismTheme } from '@docusaurus/theme-common'
import {
parseCodeBlockTitle,
parseLanguage,
@@ -8,13 +8,15 @@ import {
containsLineNumbers,
useCodeWordWrap,
} from '@docusaurus/theme-common/internal'
-import Highlight, { defaultProps } from 'prism-react-renderer'
+import Highlight, { defaultProps, type Language } from 'prism-react-renderer'
import Line from '@theme/CodeBlock/Line'
import CopyButton from '@theme/CodeBlock/CopyButton'
import WordWrapButton from '@theme/CodeBlock/WordWrapButton'
-import Container from '@theme/CodeBlock/Container'
+import Container from '@logos-theme/theme/CodeBlock/Container'
+import type { Props } from '@theme/CodeBlock/Content/String'
+
import styles from './styles.module.css'
-import theme from './theme'
+import { Typography } from '@acid-info/lsd-react'
export default function CodeBlockString({
children,
@@ -23,25 +25,27 @@ export default function CodeBlockString({
title: titleProp,
showLineNumbers: showLineNumbersProp,
language: languageProp,
-}) {
+}: Props): JSX.Element {
const {
prism: { defaultLanguage, magicComments },
} = useThemeConfig()
-
const language =
languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage
-
+ const prismTheme = usePrismTheme()
const wordWrap = useCodeWordWrap()
+
// We still parse the metastring in case we want to support more syntax in the
// future. Note that MDX doesn't strip quotes when parsing metastring:
// "title=\"xyz\"" => title: "\"xyz\""
const title = parseCodeBlockTitle(metastring) || titleProp
+
const { lineClassNames, code } = parseLines(children, {
metastring,
language,
magicComments,
})
const showLineNumbers = showLineNumbersProp ?? containsLineNumbers(metastring)
+
return (
- {title && {title}
}
+ {title && (
+
+ {title}
+
+ )}
{({ className, tokens, getLineProps, getTokenProps }) => (
(
-
- ))
- return (
-
- {showLineNumbers ? (
- <>
-
- {lineTokens}
-
- ) : (
- lineTokens
- )}
-
-
- )
-}
diff --git a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Line/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Line/styles.module.css
deleted file mode 100644
index 7c28ed9..0000000
--- a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Line/styles.module.css
+++ /dev/null
@@ -1,45 +0,0 @@
-/* Intentionally has zero specificity, so that to be able to override
-the background in custom CSS file due bug https://github.com/facebook/docusaurus/issues/3678 */
-:where(:root) {
- --docusaurus-highlighted-code-line-bg: rgb(72 77 91);
-}
-
-:where([data-theme='dark']) {
- --docusaurus-highlighted-code-line-bg: rgb(100 100 100);
-}
-
-:global(.theme-code-block-highlighted-line) {
- background-color: var(--docusaurus-highlighted-code-line-bg);
- display: block;
- margin: 0 calc(-1 * var(--ifm-pre-padding));
- padding: 0 var(--ifm-pre-padding);
-}
-
-.codeLine {
- display: table-row;
- counter-increment: line-count;
-}
-
-.codeLineNumber {
- display: table-cell;
- text-align: right;
- width: 1%;
- position: sticky;
- left: 0;
- padding: 0 var(--ifm-pre-padding);
- background: var(--ifm-pre-background);
- overflow-wrap: normal;
-}
-
-.codeLineNumber::before {
- content: counter(line-count);
- opacity: 0.4;
-}
-
-:global(.theme-code-block-highlighted-line) .codeLineNumber::before {
- opacity: 0.8;
-}
-
-.codeLineContent {
- padding-right: var(--ifm-pre-padding);
-}
diff --git a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/WordWrapButton/index.js b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/WordWrapButton/index.js
deleted file mode 100644
index bdd76ad..0000000
--- a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/WordWrapButton/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react'
-import clsx from 'clsx'
-import { translate } from '@docusaurus/Translate'
-import IconWordWrap from '@theme/Icon/WordWrap'
-import styles from './styles.module.css'
-export default function WordWrapButton({ className, onClick, isEnabled }) {
- const title = translate({
- id: 'theme.CodeBlock.wordWrapToggle',
- message: 'Toggle word wrap',
- description:
- 'The title attribute for toggle word wrapping button of code block lines',
- })
- return (
-
- )
-}
diff --git a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/WordWrapButton/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/WordWrapButton/styles.module.css
deleted file mode 100644
index fdbc894..0000000
--- a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/WordWrapButton/styles.module.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.wordWrapButtonIcon {
- width: 1.2rem;
- height: 1.2rem;
-}
-
-.wordWrapButtonEnabled .wordWrapButtonIcon {
- color: var(--ifm-color-primary);
-}
diff --git a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/index.js b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/index.js
deleted file mode 100644
index 838dfdb..0000000
--- a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/index.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React, { isValidElement } from 'react'
-import useIsBrowser from '@docusaurus/useIsBrowser'
-import ElementContent from '@theme/CodeBlock/Content/Element'
-import StringContent from '@theme/CodeBlock/Content/String'
-/**
- * Best attempt to make the children a plain string so it is copyable. If there
- * are react elements, we will not be able to copy the content, and it will
- * return `children` as-is; otherwise, it concatenates the string children
- * together.
- */
-function maybeStringifyChildren(children) {
- if (React.Children.toArray(children).some((el) => isValidElement(el))) {
- return children
- }
- // The children is now guaranteed to be one/more plain strings
- return Array.isArray(children) ? children.join('') : children
-}
-export default function CodeBlock({ children: rawChildren, ...props }) {
- // The Prism theme on SSR is always the default theme but the site theme can
- // be in a different mode. React hydration doesn't update DOM styles that come
- // from SSR. Hence force a re-render after mounting to apply the current
- // relevant styles.
- const isBrowser = useIsBrowser()
- const children = maybeStringifyChildren(rawChildren)
- const CodeBlockComp =
- typeof children === 'string' ? StringContent : ElementContent
-
- return (
-
- {children}
-
- )
-}
diff --git a/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/index.tsx
new file mode 100644
index 0000000..bd3bc84
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/theme/CodeBlock/index.tsx
@@ -0,0 +1,14 @@
+import CodeBlock from '@docusaurus/theme-classic/lib/theme/CodeBlock'
+import type { WrapperProps } from '@docusaurus/types'
+import type CodeBlockType from '@theme/CodeBlock'
+import React from 'react'
+
+type Props = WrapperProps
+
+export default function CodeBlockWrapper(props: Props): JSX.Element {
+ return (
+ <>
+
+
+ )
+}
diff --git a/packages/logos-docusaurus-theme/tsconfig.client.json b/packages/logos-docusaurus-theme/tsconfig.client.json
index 734f2d6..2c7feb4 100644
--- a/packages/logos-docusaurus-theme/tsconfig.client.json
+++ b/packages/logos-docusaurus-theme/tsconfig.client.json
@@ -7,7 +7,7 @@
"tsBuildInfoFile": "./lib/.tsbuildinfo-client",
"rootDir": "src",
"outDir": "lib",
- "module": "esnext",
+ "module": "CommonJS",
"target": "esnext",
"jsx": "react",
"types": [