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

heysujal · 2023-07-28T08:43:19Z

Pre-flight checklist

I have read the Contributing Guidelines on pull requests.
If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.

Motivation

If someone uses a language that is not supported by Docusaurus by default then you have to add that language in additionalLanguages[] in docusaurus.config.js. If a language added is not in lowercase, then highlighting for that language will not work. For example
Adding 'PHP' or 'pHp' instead of 'php'

Test Plan

Good : additionalLanguages: ['php'],

Bad : additionalLanguages: ['PHP'],

Bad : additionalLanguages: ['pHp'],

Test links

https://deploy-preview-9183--docusaurus-2.netlify.app/tests/pages/code-block-tests/#code-block-prism-language-tests

Related issues/PRs

#9012

Signed-off-by: Sujal Gupta <[email protected]>

netlify · 2023-07-28T08:56:41Z

✅ [V2]

Name	Link
🔨 Latest commit	`5420c57`
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/64d501719ba5de000713a5db
😎 Deploy Preview	https://deploy-preview-9183--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

github-actions · 2023-07-28T08:57:26Z

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	PWA	Report
/	🟠 57	🟢 97	🟢 92	🟢 100	🟠 89	Report
/docs/installation	🟠 71	🟢 100	🟢 92	🟢 100	🟠 89	Report

slorber

Thanks

You can keep phP or something like that in the additional languages of this PR so that we can make PHP work in the preview and be able to validate the PR without running local modifications. We are tracking screenshots and do visual regression tests of our pages now so that's a good way for us to ensure that this feature keeps working over time if we actually use it on our site.

Currently there's no highlighting there:
https://deploy-preview-9183--docusaurus-2.netlify.app/tests/pages/code-block-tests/#code-block-withwithout-the-good-prism-language-case-in-additionallanguages-tests

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

slorber · 2023-07-28T09:43:45Z

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

@@ -27,6 +27,21 @@ See:
 - https://github.com/facebook/docusaurus/pull/3749
 - https://github.com/facebook/docusaurus/pull/6177

+## Code block with/without the good prism language case in additionalLanguages[] tests
+
+```php


that would be nice to add 2 other cases like PHP and PhP there to ensure we also support case insensitive language metastring

Well, i already tried doing that before making a pr.
But only php code block works and other like you mentioned doesn't highlight code.
I thought our only goal was to allow the user to put a language in additionalLanguages array in any case but he should enter the language in only lower case when specifying the language of code block. Something like this

But, do we also want to add highlight support for code blocks like these?

Well, I have added them and I also saw that the VSCode Markdown preview supports highlighting all these blocks. So, maybe we should do it too.

Josh-Cena · 2023-07-28T17:21:50Z

I think this should be done within theme config validation, where we map additionalLanguages to lowercase in the first place.

slorber

Thanks, almost good but only 1 of the 3 examples there is highlighted, while I expect the 3 examples to be ;)

https://deploy-preview-9183--docusaurus-2.netlify.app/tests/pages/code-block-tests/#code-block-prism-language-tests

slorber · 2023-07-28T17:33:26Z

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

@@ -176,7 +176,7 @@ export default function themeClassic(

    configureWebpack() {
      const prismLanguages = additionalLanguages
-        .map((lang) => `prism-${lang}`)
+        .map((lang) => `prism-${lang.toLowerCase()}`)


This could be better handled in the config validation, you can use Joi to normalize/lowercase the provided user input values so that everything else in the system see lowercase values (including prism-include-languages.ts, it shouldn't be needed to lowercase there too anymore)

slorber · 2023-07-28T17:33:31Z

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

+?>
+```
+
+```PHP


test added, but unfortunately highlighting doesn't work yet

We probably need to lowercase the meta string language in the code block theme component too

slorber

Thanks, almost good but only 1 of the 3 examples there is highlighted, while I expect the 3 examples to be ;)

https://deploy-preview-9183--docusaurus-2.netlify.app/tests/pages/code-block-tests/#code-block-prism-language-tests

heysujal · 2023-07-28T17:39:17Z

yes we should support the other two as well.

heysujal · 2023-08-08T13:24:21Z

@slorber after two weeks I tried working on this PR again. now, I noticed that my code changes are not being picked up as I tried to redo the changes of PR that I have made in the local setup. For example I am using a bad case in additionalLanguages array for php like 'pHP' and I removed all the toLowerCase() that I added in this PR locally. I expected the code to break. but it still renders without any problem and gives the same output as this.

After reverting the changes I think it should have broken but it didn't. The changes not being picked up is the reason why I cannot work further on the meta string thing you mentioned (even though I guessed where to make changes)

I run yarn workspace website start whenever I make changes to recompile and build it again.

slorber · 2023-08-10T15:27:15Z

Hey, not sure why but maybe:

you had a local caching issue (run yarn clear to be sure)
you are on a case-insensitive FS (macos, windows) and can't emulate the problem correctly

Anyway, I was able to make it work and the deploy preview is fine, building on Linux, so thanks, that's fine 👍

https://deploy-preview-9183--docusaurus-2.netlify.app/tests/pages/code-block-tests/#code-block-prism-language-tests

heysujal · 2023-08-12T11:12:12Z

@slorber It feels a bit odd to me 😅😅😅, I mean you did all the work yet it looks like I have made the changes by creating a PR.

slorber · 2023-08-12T13:40:56Z

I just polished a bit what you started so that we can merge 😄 I do that often and it's faster to move on than back and forth PR discussions

heysujal · 2023-08-12T17:22:48Z

I just polished a bit what you started so that we can merge 😄 I do that often and it's faster to move on than back and forth PR discussions

Yes that makes a lot of sense

heysujal and others added 3 commits July 28, 2023 13:15

add toLowerCase()

4a90ad4

Signed-off-by: Sujal Gupta <[email protected]>

add test code block for good/bad prism language case

39088f8

Signed-off-by: Sujal Gupta <[email protected]>

Merge branch 'facebook:main' into case-agnostic-highlight

e95bea7

heysujal requested review from slorber, lex111 and Josh-Cena as code owners July 28, 2023 08:43

facebook-github-bot added the CLA Signed Signed Facebook CLA label Jul 28, 2023

add PR link

194f14f

slorber requested changes Jul 28, 2023

View reviewed changes

slorber added the pr: bug fix This PR fixes a bug in a past release. label Jul 28, 2023

slorber changed the title ~~fix: Enhanced Language Highlighting: Case-Insensitive Support~~ fix: make Prism code block language / additionalLanguages case insensitive Jul 28, 2023

heysujal added 2 commits July 28, 2023 16:45

add pHp in additionalLanguages

66aa971

add more test code blocks

d50265d

slorber requested changes Jul 28, 2023

View reviewed changes

Merge branch 'facebook:main' into case-agnostic-highlight

c16a1e4

slorber added 4 commits August 10, 2023 16:35

Add php title to code blocks, easier to debug

f86aab4

Revert changes

d4ca2b9

Normalize theme prism languages to lowercase

3f07aab

empty

5420c57

slorber changed the title ~~fix: make Prism code block language / additionalLanguages case insensitive~~ fix(theme): make Prism code block language / additionalLanguages case insensitive Aug 10, 2023

slorber merged commit 1e40943 into facebook:main Aug 10, 2023
28 of 29 checks passed

This was referenced Oct 19, 2023

chore: v3.0.0-rc.0 release #9418

Merged

chore: v3.0.0-rc.1 release #9453

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

heysujal commented Jul 28, 2023 •

edited by slorber

Loading

netlify bot commented Jul 28, 2023 •

edited

Loading

github-actions bot commented Jul 28, 2023 •

edited

Loading

slorber left a comment

slorber Jul 28, 2023

heysujal Jul 28, 2023 •

edited

Loading

heysujal Jul 28, 2023

Josh-Cena commented Jul 28, 2023

slorber left a comment

slorber Jul 28, 2023

slorber Jul 28, 2023

slorber left a comment

heysujal commented Jul 28, 2023

heysujal commented Aug 8, 2023 •

edited

Loading

slorber commented Aug 10, 2023 •

edited

Loading

heysujal commented Aug 12, 2023 •

edited

Loading

slorber commented Aug 12, 2023

heysujal commented Aug 12, 2023 •

edited

Loading

+              ?>
+              ```
+              ```PHP

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

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

Conversation

heysujal commented Jul 28, 2023 • edited by slorber Loading

Pre-flight checklist

Motivation

Test Plan

Test links

Related issues/PRs

netlify bot commented Jul 28, 2023 • edited Loading

✅ [V2]

github-actions bot commented Jul 28, 2023 • edited Loading

⚡️ Lighthouse report for the deploy preview of this PR

slorber left a comment

Choose a reason for hiding this comment

slorber Jul 28, 2023

Choose a reason for hiding this comment

heysujal Jul 28, 2023 • edited Loading

Choose a reason for hiding this comment

heysujal Jul 28, 2023

Choose a reason for hiding this comment

Josh-Cena commented Jul 28, 2023

slorber left a comment

Choose a reason for hiding this comment

slorber Jul 28, 2023

Choose a reason for hiding this comment

slorber Jul 28, 2023

Choose a reason for hiding this comment

slorber left a comment

Choose a reason for hiding this comment

heysujal commented Jul 28, 2023

heysujal commented Aug 8, 2023 • edited Loading

slorber commented Aug 10, 2023 • edited Loading

heysujal commented Aug 12, 2023 • edited Loading

slorber commented Aug 12, 2023

heysujal commented Aug 12, 2023 • edited Loading

heysujal commented Jul 28, 2023 •

edited by slorber

Loading

netlify bot commented Jul 28, 2023 •

edited

Loading

github-actions bot commented Jul 28, 2023 •

edited

Loading

heysujal Jul 28, 2023 •

edited

Loading

heysujal commented Aug 8, 2023 •

edited

Loading

slorber commented Aug 10, 2023 •

edited

Loading

heysujal commented Aug 12, 2023 •

edited

Loading

heysujal commented Aug 12, 2023 •

edited

Loading