mirror of
https://github.com/facebook/docusaurus.git
synced 2025-08-06 10:20:09 +02:00
feat(v2): add support another Prism theme for dark mode (#1984)
* feat(v2): add support another Prism theme for dark mode * add dynamically change Prism theme * Prepare for review * PR review changes * feat(v2): useThemeContext Co-authored-by: Yangshun Tay <tay.yang.shun@gmail.com>
This commit is contained in:
parent
dad50823b6
commit
92c68ed742
9 changed files with 84 additions and 9 deletions
|
@ -12,7 +12,9 @@ import defaultTheme from 'prism-react-renderer/themes/palenight';
|
|||
import Clipboard from 'clipboard';
|
||||
import rangeParser from 'parse-numeric-range';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import useThemeContext from '@theme/hooks/useThemeContext';
|
||||
import Playground from '@theme/Playground';
|
||||
|
||||
import styles from './styles.module.css';
|
||||
|
||||
const highlightLinesRangeRegex = /{([\d,-]+)}/;
|
||||
|
@ -33,6 +35,9 @@ export default ({
|
|||
const target = useRef(null);
|
||||
const button = useRef(null);
|
||||
let highlightLines = [];
|
||||
const {theme} = useThemeContext();
|
||||
const prismTheme =
|
||||
theme === 'dark' ? prism.darkTheme : prism.theme || defaultTheme;
|
||||
|
||||
if (metastring && highlightLinesRangeRegex.test(metastring)) {
|
||||
const highlightLinesRange = metastring.match(highlightLinesRangeRegex)[1];
|
||||
|
@ -60,7 +65,7 @@ export default ({
|
|||
<Playground
|
||||
scope={{...React}}
|
||||
code={children.trim()}
|
||||
theme={prism.theme || defaultTheme}
|
||||
theme={prismTheme}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
|
@ -83,7 +88,7 @@ export default ({
|
|||
return (
|
||||
<Highlight
|
||||
{...defaultProps}
|
||||
theme={prism.theme || defaultTheme}
|
||||
theme={prismTheme}
|
||||
code={children.trim()}
|
||||
language={language}>
|
||||
{({className, style, tokens, getLineProps, getTokenProps}) => (
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue