feat(v2): allow custom syntax highlighting theme (#1674)

This commit is contained in:
Endi 2019-07-19 01:19:00 +07:00 committed by Yangshun Tay
parent 0daed4abec
commit 2d6aaea069
5 changed files with 37 additions and 189 deletions

View file

@ -12,6 +12,7 @@ import Highlight, {defaultProps} from 'prism-react-renderer';
import nightOwlTheme from 'prism-react-renderer/themes/nightOwl';
import Clipboard from 'clipboard';
import Loading from '@theme/Loading';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import styles from './styles.module.css';
/* Live playground is not small in size, lazy load it is better */
@ -23,6 +24,11 @@ const Playground = LoadableVisibility({
});
export default ({children, className: languageClassName, live, ...props}) => {
const {
siteConfig: {
themeConfig: {prismTheme},
},
} = useDocusaurusContext();
const [showCopied, setShowCopied] = useState(false);
const target = useRef(null);
const button = useRef(null);
@ -48,7 +54,7 @@ export default ({children, className: languageClassName, live, ...props}) => {
<Playground
scope={{...React}}
code={children.trim()}
theme={nightOwlTheme}
theme={prismTheme || nightOwlTheme}
{...props}
/>
);
@ -67,7 +73,7 @@ export default ({children, className: languageClassName, live, ...props}) => {
return (
<Highlight
{...defaultProps}
theme={nightOwlTheme}
theme={prismTheme || nightOwlTheme}
code={children.trim()}
language={language}>
{({className, style, tokens, getLineProps, getTokenProps}) => (