@docusaurus/theme-classic 0.0.0-4342 → 0.0.0-4344

package/lib/theme-classic.d.ts

@@ -114,6 +114,7 @@ declare module '@theme/CodeBlock' {
     readonly className?: string;
     readonly metastring?: string;
     readonly title?: string;
+    readonly language?: string;
   }
 
   const CodeBlock: (props: Props) => JSX.Element;

package/lib-next/theme/CodeBlock/index.js

@@ -20,9 +20,10 @@ import usePrismTheme from '@theme/hooks/usePrismTheme';
 import styles from './styles.module.css';
 export default function CodeBlock({
   children,
-  className: blockClassName,
+  className: blockClassName = '',
   metastring,
   title,
+  language: languageProp,
 }) {
   const {prism} = useThemeConfig();
   const [showCopied, setShowCopied] = useState(false);
@@ -73,7 +74,8 @@ export default function CodeBlock({
   } // The children is now guaranteed to be one/more plain strings
 
   const content = Array.isArray(children) ? children.join('') : children;
-  const language = parseLanguage(blockClassName) ?? prism.defaultLanguage;
+  const language =
+    languageProp ?? parseLanguage(blockClassName) ?? prism.defaultLanguage;
   const {highlightLines, code} = parseLines(content, metastring, language);
 
   const handleCopyCode = () => {
@@ -94,6 +96,10 @@ export default function CodeBlock({
           className={clsx(
             styles.codeBlockContainer,
             blockClassName,
+            {
+              [`language-${language}`]:
+                language && !blockClassName.includes(`language-${language}`),
+            },
             ThemeClassNames.common.codeBlock,
           )}>
           {codeBlockTitle && (

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/theme-classic",
-  "version": "0.0.0-4342",
+  "version": "0.0.0-4344",
   "description": "Classic theme for Docusaurus",
   "main": "lib/index.js",
   "types": "src/theme-classic.d.ts",
@@ -23,14 +23,14 @@
     "update-code-translations": "node -e 'require(\"./update-code-translations.js\").run()'"
   },
   "dependencies": {
-    "@docusaurus/core": "0.0.0-4342",
-    "@docusaurus/plugin-content-blog": "0.0.0-4342",
-    "@docusaurus/plugin-content-docs": "0.0.0-4342",
-    "@docusaurus/plugin-content-pages": "0.0.0-4342",
-    "@docusaurus/theme-common": "0.0.0-4342",
-    "@docusaurus/theme-translations": "0.0.0-4342",
-    "@docusaurus/utils": "0.0.0-4342",
-    "@docusaurus/utils-validation": "0.0.0-4342",
+    "@docusaurus/core": "0.0.0-4344",
+    "@docusaurus/plugin-content-blog": "0.0.0-4344",
+    "@docusaurus/plugin-content-docs": "0.0.0-4344",
+    "@docusaurus/plugin-content-pages": "0.0.0-4344",
+    "@docusaurus/theme-common": "0.0.0-4344",
+    "@docusaurus/theme-translations": "0.0.0-4344",
+    "@docusaurus/utils": "0.0.0-4344",
+    "@docusaurus/utils-validation": "0.0.0-4344",
     "@mdx-js/mdx": "^1.6.21",
     "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
@@ -45,8 +45,8 @@
     "rtlcss": "^3.3.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "0.0.0-4342",
-    "@docusaurus/types": "0.0.0-4342",
+    "@docusaurus/module-type-aliases": "0.0.0-4344",
+    "@docusaurus/types": "0.0.0-4344",
     "@types/mdx-js__react": "^1.5.4",
     "@types/parse-numeric-range": "^0.0.1",
     "@types/rtlcss": "^3.1.1",
@@ -61,5 +61,5 @@
   "engines": {
     "node": ">=14"
   },
-  "gitHead": "e9ef727d5f5fefa96d92ad98fa61f3e3e961dd1d"
+  "gitHead": "d99393e9e4889d73ad25332cd54b067a80db258c"
 }

package/src/theme/CodeBlock/index.tsx

@@ -24,9 +24,10 @@ import styles from './styles.module.css';
 
 export default function CodeBlock({
   children,
-  className: blockClassName,
+  className: blockClassName = '',
   metastring,
   title,
+  language: languageProp,
 }: Props): JSX.Element {
   const {prism} = useThemeConfig();
 
@@ -85,8 +86,7 @@ export default function CodeBlock({
     : (children as string);
 
   const language =
-    parseLanguage(blockClassName) ??
-    (prism.defaultLanguage as Language | undefined);
+    languageProp ?? parseLanguage(blockClassName) ?? prism.defaultLanguage;
   const {highlightLines, code} = parseLines(content, metastring, language);
 
   const handleCopyCode = () => {
@@ -102,12 +102,16 @@ export default function CodeBlock({
       key={String(mounted)}
       theme={prismTheme}
       code={code}
-      language={language ?? ('text' as Language)}>
+      language={(language ?? 'text') as Language}>
       {({className, style, tokens, getLineProps, getTokenProps}) => (
         <div
           className={clsx(
             styles.codeBlockContainer,
             blockClassName,
+            {
+              [`language-${language}`]:
+                language && !blockClassName.includes(`language-${language}`),
+            },
             ThemeClassNames.common.codeBlock,
           )}>
           {codeBlockTitle && (

package/src/theme-classic.d.ts

@@ -114,6 +114,7 @@ declare module '@theme/CodeBlock' {
     readonly className?: string;
     readonly metastring?: string;
     readonly title?: string;
+    readonly language?: string;
   }
 
   const CodeBlock: (props: Props) => JSX.Element;