mirror of
https://github.com/facebook/docusaurus.git
synced 2025-06-12 15:52:39 +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,6 +12,8 @@ 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 styles from './styles.module.css';
|
||||
|
||||
const highlightLinesRangeRegex = /{([\d,-]+)}/;
|
||||
|
@ -26,6 +28,9 @@ export default ({children, className: languageClassName, metastring}) => {
|
|||
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];
|
||||
|
@ -65,7 +70,7 @@ export default ({children, className: languageClassName, metastring}) => {
|
|||
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