Syntax highlighting fails and breaks the formatting when hovering over nav

🐛 Bug Report

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

The highlighting and formatting of code blocks breaks when I hover over the top right menu items.

This happens on all pages containing a code block.

Demo: https://docs.talon.one/docs/dev/getting-started/overview/

The console doesn’t report any error.

Have you read the Contributing Guidelines on issues?

yes

Steps to reproduce

1. Go on a page that contains a code block.
2. hover over the top right menu items.

Expected behavior

The code blocks remain the same.

Actual behavior

Hovering over the menu breaks the codeblocks.

Your environment

• Public source code: No but I can share whatever you need.
• Public site URL: https://docs.talon.one/docs/dev/getting-started/overview/
• Docusaurus version used: 2.0.0-beta.5
• Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0): tested on Firefox and Brave
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): -

Package.json dependencies

"dependencies": {
    "@docusaurus/core": "^2.0.0-beta.5",
    "@docusaurus/preset-classic": "^2.0.0-beta.5",
    "@docusaurus/theme-search-algolia": "^2.0.0-beta.5",
    "@mdx-js/react": "^1.6.22",
    "@svgr/webpack": "^5.5.0",
    "antd": "^4.9.4",
    "clsx": "^1.1.1",
    "core-js": "^3.8.1",
    "docusaurus-gtm-plugin": "^0.0.2",
    "docusaurus-plugin-sass": "^0.1.14",
    "file-loader": "^6.2.0",
    "https-browserify": "^1.0.0",
    "mobx": "^6.0.4",
    "path-browserify": "^1.0.1",
    "prism-react-renderer": "^1.2.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "redoc": "^2.0.0-rc.48",
    "redocusaurus": "^0.4.5",
    "sass": "^1.32.13",
    "styled-components": "^5.2.1",
    "url-loader": "^4.1.1"
  },

Let me know if you need extra information.

[Josh-Cena]

@ArthurFlageul it’s quite hard to debug given the customizations you’ve made and the unavailability of source code. I would conclude that redocusaurus is breaking your site because it does do magic on client side.

Following the discussion in https://github.com/rohit-gohri/redocusaurus/issues/89 and https://github.com/PrismJS/prism/issues/3066 I think they are right: it has something to do with redocusaurus remounting / reparsing code blocks client-side. I would inspect if Prism.manual is a good fix.

[armano2]

in my opinion main problem lays down in prism react plugin, in current (as is) implementation, styles are injected at runtime instead using css for it,

what do you guys think about removing runtime from it completely? and use css for colors?

that could fix some additional issues with highligting not working without js css file: https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-dark.css

this task is going to require us to process this file / import it conditionally on user config to add support for dark/light theme, but that shouldn’t be a big issue

---

this is just an idea:

prism-react-renderer seem a little outdated and not maintained, maybe we could change it to use refractor if we need it at runtime react-syntax-highlighter if we don’t need it at runtime @mapbox/rehype-prism