Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 11 commits into from
Aug 10, 2023
Merged

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

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
4a90ad4
add toLowerCase()
heysujal Jul 28, 2023
39088f8
add test code block for good/bad prism language case
heysujal Jul 28, 2023
e95bea7
Merge branch 'facebook:main' into case-agnostic-highlight
heysujal Jul 28, 2023
194f14f
add PR link
heysujal Jul 28, 2023
66aa971
add pHp in additionalLanguages
heysujal Jul 28, 2023
d50265d
add more test code blocks
heysujal Jul 28, 2023
c16a1e4
Merge branch 'facebook:main' into case-agnostic-highlight
heysujal Aug 8, 2023
f86aab4
Add php title to code blocks, easier to debug
slorber Aug 10, 2023
d4ca2b9
Revert changes
slorber Aug 10, 2023
3f07aab
Normalize theme prism languages to lowercase
slorber Aug 10, 2023
5420c57
empty
slorber Aug 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/docusaurus-theme-classic/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ export default function themeClassic(

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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)

.join('|');

return {
Expand Down
2 changes: 1 addition & 1 deletion packages/docusaurus-theme-classic/src/theme/prism-include-languages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default function prismIncludeLanguages(

additionalLanguages.forEach((lang) => {
// eslint-disable-next-line global-require, import/no-dynamic-require
require(`prismjs/components/prism-${lang}`);
require(`prismjs/components/prism-${lang.toLowerCase()}`);
});

delete (globalThis as Optional<typeof globalThis, 'Prism'>).Prism;
Expand Down
35 changes: 35 additions & 0 deletions website/_dogfooding/_pages tests/code-block-tests.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

@heysujal heysujal Jul 28, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
image

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

<?php
$x=15;
$y=30;
$z=$x+$y;
echo "Sum: ",$z;
?>
```

```PHP
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

<?php
$x=15;
$y=30;
$z=$x+$y;
echo "Sum: ",$z;
?>
```

```pHp
<?php
$x=15;
$y=30;
$z=$x+$y;
echo "Sum: ",$z;
?>
```

See:

- https://github.com/facebook/docusaurus/pull/9183

## `pre`

### `pre > string`
Expand Down
2 changes: 1 addition & 1 deletion website/docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Loading