Allow case-insensitivity for code block language

[igormalaes]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Description

Hey, I tried to add PHP for code highlighting in the code blocks and according to the doc for this PHP needs to be added in the prism array.
After running the command:

npm run swizzle @docusaurus/theme-classic prism-include-languages

And adding 'PHP' to the array, it didn't work; I still had no code highlighting.
After a few minutes troubleshooting, I wrote PHP in lower case (because out of habit I write it in upper case) and it worked.

I'm unsure this is a bug or not. In Markdown, it functions correctly, and no distinction is made as to whether the programming language is written in upper case or lower case (as shown below). If it's not a bug, I believe it's worth mentioning in the documentation to avoid confusion for future users.

const prismIncludeLanguages = (Prism) => {
  // ...

  additionalLanguages.forEach((lang) => {
    require(`prismjs/components/prism-${lang}`);
  });

  require('/path/to/your/prism-language-definition');

  // ...
};

const prismIncludeLanguages = (Prism) => {
  // ...

  additionalLanguages.forEach((lang) => {
    require(`prismjs/components/prism-${lang}`);
  });

  require('/path/to/your/prism-language-definition');

  // ...
};

Self-service

• I'd be willing to address this documentation request myself.

[Josh-Cena]

I believe it won't be too hard to support different casing. Are you using Linux?

[igormalaes]

I believe it won't be too hard to support different casing. Are you using Linux?

Yes. Ubuntu 22.04.2 LTS

[Josh-Cena]

That explains why you are not able to load the component—both Windows and macOS file systems are case-insensitive, so the php.js component still ends up getting imported, but not on Linux...

[slorber]

according to the doc for this PHP needs to be added in the prism array.

According to the docs:

Each additional language has to be a valid Prism component name.

https://prismjs.com/#supported-languages

PHP - php

---

We could allow users to provide pHp and other casing but not sure it's so good to try to fix invalid user inputs.

Maybe just having a clear error message could be better, if possible?

[Josh-Cena]

It would just be require(`...`.toLowerCase()). Since it already works out of the box on Windows/Mac, it makes sense to support it on Linux.

[slorber]

Yes I know it's not complicated.

Just wondering if teaching users that it's ok to provide invalid inputs according to our own docs is better. Sometimes fail-fast is better than fail-safe behavior, and in this particular case, I'm not sure which is best.

Ok to move on and add toLowerCase() (since that's better than the current state), but still not 100% convinced 🤪

[heysujal]

Hi, @igmadev0 @slorber @Josh-Cena I added additionalLanguages: ['cpp','java','PHP'], in docusaurus config file and added .toLowerCase() in both occurrences below (because I wasn't able to see any effect when applied toLoweCase() in one)

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

Line 179 in 09ea3bc

.map((lang) => `prism-${lang}`)

docusaurus/packages/docusaurus-theme-classic/src/theme/prism-include-languages.ts

Line 30 in 09ea3bc

require(`prismjs/components/prism-${lang}`);

but it didn't work . Looks like toLowerCase() isn't even doing anything.

I have tried adding the toLowerCase() to the lang variable itself but it doesn't seem to work either.

[heysujal]

@homotechsual has suggested adding a note in the documentation something like this

The language name you provide will be handled case sensitively on certain operating systems, to ensure this does not cause issues during your builds we strongly recommend that you enter language strings in your config file using only lowercase.

[Josh-Cena]

@heysujal, how are you applying these changes? Are you swizzling, or are you editing the source file and then compiling it? Either way, you would need to make sure that the compiled JS file is actually picked up, instead of the original TS file.

[heysujal]

@Josh-Cena Yes, I am making changes in both the typescript files I mentioned above. I ran yarn run start and it looks like it is now picking up the changes and highlighting for PHP now works

Should I make a PR now ?

[slorber]

ok for a PR

You can also add a test in website/_dogfooding so that we can see in the PR that PHP code block works with/without the good prism language case