3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-13 00:03:57 +02:00
Code Issues Projects Releases Packages Wiki Activity

fix(v2): render correct syntax theme for current website theme (#2150)

Browse source
This commit is contained in:
Yangshun Tay 2019-12-27 13:37:39 +08:00 • committed by GitHub
parent 92c68ed742
commit 167f71a654
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

14
packages/docusaurus-theme-classic/src/theme/CodeBlock/index.js
View file

@ -24,7 +24,20 @@ export default ({children, className: languageClassName, metastring}) => {
themeConfig: {prism = {}},
},
} = useDocusaurusContext();
const [showCopied, setShowCopied] = useState(false);
const [mounted, setMounted] = useState(false);
// The Prism theme on SSR is always the default theme but the site theme
// can be in a different mode. React hydration doesn't update DOM styles
// that come from SSR. Hence force a re-render after mounting to apply the
// current relevant styles. There will be a flash seen of the original
// styles seen using this current approach but that's probably ok. Fixing
// the flash will require changing the theming approach and is not worth it
// at this point.
useEffect(() => {
setMounted(true);
}, []);
const target = useRef(null);
const button = useRef(null);
let highlightLines = [];
@ -70,6 +83,7 @@ export default ({children, className: languageClassName, metastring}) => {
return (
<Highlight
{...defaultProps}
key={mounted}
theme={prismTheme}
code={children.trim()}
language={language}>