github.com/wfusion/gofusion@v1.1.14/common/infra/asynq/asynqmon/ui/src/components/SyntaxHighlighter.tsx (about) 1 import React from "react"; 2 import { useTheme, Theme } from "@material-ui/core/styles"; 3 import { Light as ReactSyntaxHighlighter } from "react-syntax-highlighter"; 4 import json from "react-syntax-highlighter/dist/esm/languages/hljs/json"; 5 import styleDark from "react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark"; 6 import styleLight from "react-syntax-highlighter/dist/esm/styles/hljs/atom-one-light"; 7 import { isDarkTheme } from "../theme"; 8 9 interface Props { 10 language: string; 11 children: string; 12 customStyle?: object; 13 } 14 15 ReactSyntaxHighlighter.registerLanguage("json", json); 16 17 // Theme aware syntax-highlighter component. 18 export default function SyntaxHighlighter(props: Props) { 19 const theme = useTheme<Theme>(); 20 const style = isDarkTheme(theme) ? styleDark : styleLight; 21 return ( 22 <ReactSyntaxHighlighter 23 language={props.language} 24 style={style} 25 customStyle={props.customStyle} 26 > 27 {props.children} 28 </ReactSyntaxHighlighter> 29 ); 30 }