fix(theme): make Prism code block language / additionalLanguages case insensitive (#9183)

Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>

packages/docusaurus-theme-classic/src/__tests__/options.test.ts

@@ -38,8 +38,8 @@ describe('themeConfig', () => {
       prism: {
         theme,
         darkTheme,
-        defaultLanguage: 'javascript',
+        defaultLanguage: 'javaSCRIPT',
-        additionalLanguages: ['kotlin', 'java'],
+        additionalLanguages: ['koTLin', 'jaVa'],
         magicComments: [
           {
             className: 'theme-code-block-highlighted-line',
@@ -126,6 +126,12 @@ describe('themeConfig', () => {
     expect(testValidateThemeConfig(userConfig)).toEqual({
       ...DEFAULT_CONFIG,
       ...userConfig,
+      prism: {
+        ...userConfig.prism,
+        // Modified/normalized values
+        defaultLanguage: 'javascript',
+        additionalLanguages: ['kotlin', 'java'],
+      },
     });
   });
 

packages/docusaurus-theme-classic/src/options.ts

@@ -313,6 +313,10 @@ const LogoSchema = Joi.object({
   className: Joi.string(),
 });
 
+// Normalize prism language to lowercase
+// See https://github.com/facebook/docusaurus/issues/9012
+const PrismLanguage = Joi.string().custom((val) => val.toLowerCase());
+
 export const ThemeConfigSchema = Joi.object<ThemeConfig>({
   // TODO temporary (@alpha-58)
   // @ts-expect-error: forbidden
@@ -385,9 +389,9 @@ export const ThemeConfigSchema = Joi.object<ThemeConfig>({
       plain: Joi.alternatives().try(Joi.array(), Joi.object()).required(),
       styles: Joi.alternatives().try(Joi.array(), Joi.object()).required(),
     }),
-    defaultLanguage: Joi.string(),
+    defaultLanguage: PrismLanguage,
     additionalLanguages: Joi.array()
-      .items(Joi.string())
+      .items(PrismLanguage)
       .default(DEFAULT_CONFIG.prism.additionalLanguages),
     magicComments: Joi.array()
       .items(

packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.tsx

@@ -24,6 +24,13 @@ import type {Props} from '@theme/CodeBlock/Content/String';
 
 import styles from './styles.module.css';
 
+// Prism languages are always lowercase
+// We want to fail-safe and allow both "php" and "PHP"
+// See https://github.com/facebook/docusaurus/issues/9012
+function normalizeLanguage(language: string | undefined): string | undefined {
+  return language?.toLowerCase();
+}
+
 export default function CodeBlockString({
   children,
   className: blockClassName = '',
@@ -35,8 +42,10 @@ export default function CodeBlockString({
   const {
     prism: {defaultLanguage, magicComments},
   } = useThemeConfig();
-  const language =
+  const language = normalizeLanguage(
-    languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage;
+    languageProp ?? parseLanguage(blockClassName) ?? defaultLanguage,
+  );
+
   const prismTheme = usePrismTheme();
   const wordWrap = useCodeWordWrap();
 

website/_dogfooding/_pages tests/code-block-tests.mdx

@@ -27,6 +27,41 @@ See:
 - https://github.com/facebook/docusaurus/pull/3749
 - https://github.com/facebook/docusaurus/pull/6177
 
+## Code block prism language tests
+
+Code block with/without the good prism language case(lower or upper) in `additionalLanguages[]`
+
+```php title="php"
+<?php
+$x=15;
+$y=30;
+$z=$x+$y;
+echo "Sum: ",$z;
+?>
+```
+
+```PHP title="PHP"
+<?php
+$x=15;
+$y=30;
+$z=$x+$y;
+echo "Sum: ",$z;
+?>
+```
+
+```pHp title="pHp"
+<?php
+$x=15;
+$y=30;
+$z=$x+$y;
+echo "Sum: ",$z;
+?>
+```
+
+See:
+
+- https://github.com/facebook/docusaurus/pull/9183
+
 ## `pre`
 
 ### `pre > string`

website/docusaurus.config.js

@@ -461,7 +461,7 @@ module.exports = async function createConfigAsync() {
           content: `⭐️ If you like Docusaurus, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/facebook/docusaurus">GitHub</a> and follow us on <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/docusaurus">Twitter ${TwitterSvg}</a>`,
         },
         prism: {
-          additionalLanguages: ['java', 'latex'],
+          additionalLanguages: ['java', 'latex', 'PHp'],
           magicComments: [
             {
               className: 'theme-code-block-highlighted-line',