Code block highlighting of script tag in html syntax is invalid

[JOU-amjs]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

When I upgrade from v2 to v3. I found the html code block not recognize the js code in <script> any more, which is normal before upgrading.

The following is snapshot.

And I also found that class names of js code is recognized as plain text like this.

Reproducible demo

https://codesandbox.io/p/sandbox/charming-torvalds-h9spkl?file=%2Fsrc%2Fpages%2Fmarkdown-page.md&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clops0uop000d3b6k3a41myzq%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clops0uoo00043b6kjjat6mdy%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clops0uop000b3b6k19zjjaix%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clops0uop000c3b6ke2qbkxpg%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B60%252C40%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clops0uoo00043b6kjjat6mdy%2522%253A%257B%2522id%2522%253A%2522clops0uoo00043b6kjjat6mdy%2522%252C%2522activeTabId%2522%253A%2522clops3pq900qm3b6kzgep5qvz%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Fpages%252Fmarkdown-page.md%2522%252C%2522id%2522%253A%2522clops3pq900qm3b6kzgep5qvz%2522%252C%2522mode%2522%253A%2522temporary%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%257D%252C%2522clops0uop000c3b6ke2qbkxpg%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clops0uop000c3b6ke2qbkxpg%2522%257D%252C%2522clops0uop000b3b6k19zjjaix%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clops0uop00053b6koulfpl6j%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522docusaurus%2522%257D%252C%257B%2522id%2522%253A%2522clops0uop00063b6kpy8f9oq1%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522start%2522%257D%252C%257B%2522id%2522%253A%2522clops0uop00073b6kxqpgr96l%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522build%2522%257D%252C%257B%2522id%2522%253A%2522clops0uop00083b6ki1hh0et7%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522clear%2522%257D%252C%257B%2522id%2522%253A%2522clops0uop00093b6ka6tt9orb%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522write-heading-ids%2522%257D%252C%257B%2522id%2522%253A%2522clops0uop000a3b6kd6gt7mvo%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%255D%252C%2522id%2522%253A%2522clops0uop000b3b6k19zjjaix%2522%252C%2522activeTabId%2522%253A%2522clops0uop00053b6koulfpl6j%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A23.888888888888886%257D

Steps to reproduce

1. open the src/pages/markdown-page.md.
2. run the project.

Expected behavior

Highlight valid in html code block.

Actual behavior

and you can find the invalid effect

<div>aaa</div>
<script>
const a = 1;
console.log(a);
</script>

Your environment

• Docusaurus version used: v3.0.0
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome 119, Node.js 18.8.0
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Windows/Mac

Self-service

• I'd be willing to fix this bug myself.

[Josh-Cena]

Hi, could you try #9506 (comment)?

[JOU-amjs]

Hi, could you try #9506 (comment)?

Wow... it works. THANKS SO MUCH!

[Josh-Cena]

Going to reopen until it gets fixed on prism-react-renderer's end. I'm going to send a issue if no one else has

[slorber]

cc @carloskelly13 any idea what's happening here?

Looks like languages are now loaded in the wrong order? (cf #9506 (comment))

[carloskelly13]

@slorber Yeah, good find. The problem is the html (https://github.com/FormidableLabs/prism-react-renderer/blob/master/packages/generate-prism-languages/index.ts#L23) language preset does not highlight script tags. I've fixed this locally with reverting back to top-level markup and will get a patch published here.

Here is an example of the fix doing what I think we want →

Update: I have a PR here → FormidableLabs/prism-react-renderer#230

[slorber]

Thanks @carloskelly13!
Let me know when it's on npm so that I can test it.

[carloskelly13]

@slorber prism-react-renderer@2.2.0 is published. Let me know if this fixes it! Thanks!

[slorber]

Thanks @carloskelly13 👍 I'll test it soon

[slorber]

thanks @carloskelly13 , can confirm it works for our own website, and also fix <style> tags

#9567

[slorber]

@carloskelly13 some impacts our visual regression testing tool detected.

(by the way I should have been more careful because when upgrading it reported the regressions 😅 )

It also improves inline style:

It fixes this

But for some reason this one lose its highlighting when upgradng to v2.2

Both cases on page https://docusaurus.io/docs/seo

Not a big deal though, because it was already the case before under v1. I just thought you might like to know about this edge case.