implement code block

packages/docusaurus-playground/docs/index.md

@@ -40,16 +40,16 @@ You can type this command into Command Prompt, Powershell, Terminal, or any othe
 
 The command also installs all necessary dependencies you need to run Docusaurus.
 
-```
-import React from 'react';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+```tsx
+import React from 'react'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
 
 const Hello = () => {
-const {siteConfig} = useDocusaurusContext();
-  const {title, tagline} = siteConfig;
+  const { siteConfig } = useDocusaurusContext()
+  const { title, tagline } = siteConfig
 
-  return <div>{`${title} · ${tagline}`}</div>;
-};
+  return <div>{`${title} · ${tagline}`}</div>
+}
 ```
 
 ## Start your site

packages/logos-docusaurus-theme/src/client/components/Icon/Icon.tsx

@@ -40,6 +40,7 @@ export const Icon = (props: TProps): JSX.Element => {
         styles.icon,
         colorMode === 'dark' ? styles.dark : styles.light,
         styles[size],
+        props.className && props.className,
       )}
     >
       {children}

packages/logos-docusaurus-theme/src/client/css/custom.scss

@@ -182,6 +182,12 @@
   --ifm-pills-spacing: 0.125rem;
   --ifm-tabs-padding-horizontal: 1rem;
   --ifm-tabs-padding-vertical: 1rem;
+
+  --note: #d4d5d8;
+  --tip: #6ace4b;
+  --caution: #ddaa39;
+  --danger: #e46967;
+  --info: #68b1d0;
 }
 
 @include utils.responsive('lg', 'down') {
@@ -210,6 +216,10 @@ svg * {
   color: rgb(var(--lsd-text-secondary)) !important;
 }
 
+code {
+  color: rgb(var(--lsd-text-secondary));
+}
+
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
   --ifm-hero-background-color: #f8f8fa;

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, usePrismTheme } from '@docusaurus/theme-common'
+import { useThemeConfig } from '@docusaurus/theme-common'
 import {
   parseCodeBlockTitle,
   parseLanguage,
@@ -14,6 +14,8 @@ import CopyButton from '@theme/CodeBlock/CopyButton'
 import WordWrapButton from '@theme/CodeBlock/WordWrapButton'
 import Container from '@theme/CodeBlock/Container'
 import styles from './styles.module.css'
+import theme from './theme'
+
 export default function CodeBlockString({
   children,
   className: blockClassName = '',
@@ -25,9 +27,10 @@ export default function CodeBlockString({
   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:
@@ -53,7 +56,7 @@ export default function CodeBlockString({
       <div className={styles.codeBlockContent}>
         <Highlight
           {...defaultProps}
-          theme={prismTheme}
+          theme={theme}
           code={code}
           language={language ?? 'text'}
         >

packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/styles.module.css

@@ -63,10 +63,13 @@
   background: var(--prism-background-color);
   color: var(--prism-color);
   border: 1px solid rgb(var(--lsd-border-primary));
-  padding: 0.4rem;
   line-height: 0;
   transition: opacity var(--ifm-transition-fast) ease-in-out;
   opacity: 0;
+  width: 28px;
+  height: 28px;
+  box-sizing: border-box;
+  justify-content: center;
 }
 
 .buttonGroup button:focus-visible,

packages/logos-docusaurus-theme/src/client/theme/CodeBlock/Content/theme.ts

@@ -0,0 +1,107 @@
+// Converted automatically using ./tools/themeFromVsCode
+import { PrismTheme } from 'prism-react-renderer'
+
+const theme: PrismTheme = {
+  plain: {
+    color: '#ffffff',
+    backgroundColor: '#1E1E1E',
+  },
+  styles: [
+    {
+      types: ['prolog'],
+      style: {
+        color: 'rgb(0, 0, 128)',
+      },
+    },
+    {
+      types: ['comment'],
+      style: {
+        color: 'rgb(106, 153, 85)',
+      },
+    },
+    {
+      types: ['builtin', 'changed', 'keyword', 'interpolation-punctuation'],
+      style: {
+        color: '#BC89BD',
+      },
+    },
+    {
+      types: ['number', 'inserted'],
+      style: {
+        color: 'rgb(181, 206, 168)',
+      },
+    },
+    {
+      types: ['constant'],
+      style: {
+        color: 'rgb(100, 102, 149)',
+      },
+    },
+    {
+      types: ['attr-name', 'variable'],
+      style: {
+        color: 'rgb(156, 220, 254)',
+      },
+    },
+    {
+      types: ['deleted', 'string', 'attr-value', 'template-punctuation'],
+      style: {
+        color: 'rgb(206, 145, 120)',
+      },
+    },
+    {
+      types: ['selector'],
+      style: {
+        color: 'rgb(215, 186, 125)',
+      },
+    },
+    {
+      // Fix tag color
+      types: ['tag'],
+      style: {
+        color: 'rgb(78, 201, 176)',
+      },
+    },
+    {
+      // Fix tag color for HTML
+      types: ['tag'],
+      languages: ['markup'],
+      style: {
+        color: 'rgb(86, 156, 214)',
+      },
+    },
+    {
+      types: ['punctuation', 'operator'],
+      style: {
+        color: 'rgb(212, 212, 212)',
+      },
+    },
+    {
+      // Fix punctuation color for HTML
+      types: ['punctuation'],
+      languages: ['markup'],
+      style: {
+        color: '#808080',
+      },
+    },
+    {
+      types: ['function'],
+      style: {
+        color: 'rgb(220, 220, 170)',
+      },
+    },
+    {
+      types: ['class-name'],
+      style: {
+        color: 'rgb(78, 201, 176)',
+      },
+    },
+    {
+      types: ['char'],
+      style: {
+        color: 'rgb(209, 105, 105)',
+      },
+    },
+  ],
+}
+export default theme

packages/logos-docusaurus-theme/src/client/theme/CodeBlock/CopyButton/index.tsx

@@ -51,8 +51,11 @@ export default function CopyButton({ code, className }) {
       onClick={handleCopyCode}
     >
       <span className={styles.copyButtonIcons} aria-hidden="true">
-        <IconCopy className={styles.copyButtonIcon} />
-        <IconSuccess className={styles.copyButtonSuccessIcon} />
+        {isCopied ? (
+          <IconSuccess className={styles.copyButtonSuccessIcon} />
+        ) : (
+          <IconCopy className={styles.copyButtonIcon} />
+        )}
       </span>
     </button>
   )

packages/logos-docusaurus-theme/src/client/theme/CodeBlock/CopyButton/styles.module.css

@@ -4,37 +4,30 @@
 
 .copyButtonIcons {
   position: relative;
-  width: 1.125rem;
-  height: 1.125rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .copyButtonIcon,
 .copyButtonSuccessIcon {
-  position: absolute;
-  top: 0;
-  left: 0;
   fill: currentColor;
   opacity: inherit;
-  width: inherit;
-  height: inherit;
+  width: 14px;
+  height: 14px;
   transition: all var(--ifm-transition-fast) ease;
 }
 
 .copyButtonSuccessIcon {
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) scale(0.33);
   opacity: 0;
   color: #00d600;
 }
 
 .copyButtonCopied .copyButtonIcon {
-  transform: scale(0.33);
   opacity: 0;
 }
 
 .copyButtonCopied .copyButtonSuccessIcon {
-  transform: translate(-50%, -50%) scale(1);
   opacity: 1;
   transition-delay: 0.075s;
 }