From 71d23129eff75fb89e95e7a33b3683c2017ce72c Mon Sep 17 00:00:00 2001
From: luxiaotao1123 <t1341870251@163.com>
Date: 星期一, 14 十月 2024 11:21:49 +0800
Subject: [PATCH] #
---
zy-acs-flow/src/map/JsonShow.jsx | 80 ++++++++++++++++++++++++++--------------
1 files changed, 52 insertions(+), 28 deletions(-)
diff --git a/zy-acs-flow/src/map/JsonShow.jsx b/zy-acs-flow/src/map/JsonShow.jsx
index f2df704..977fed5 100644
--- a/zy-acs-flow/src/map/JsonShow.jsx
+++ b/zy-acs-flow/src/map/JsonShow.jsx
@@ -1,5 +1,10 @@
import React, { useState, useRef, useEffect } from 'react';
import { Box, Typography, Paper, useTheme } from '@mui/material';
+import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
+import jsonLang from 'react-syntax-highlighter/dist/esm/languages/hljs/json';
+import { xcode, atomOneDark, a11yLight } from 'react-syntax-highlighter/dist/esm/styles/hljs';
+
+// https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/
const parseJson = (jsonStr) => {
let json = '';
@@ -10,6 +15,53 @@
json = 'Invalid JSON';
}
return json;
+}
+
+SyntaxHighlighter.registerLanguage('json', jsonLang);
+
+const JsonShow = ({ data, height = 500 }) => {
+ const theme = useTheme();
+ const themeMode = theme.palette.mode;
+
+ let json = parseJson(data);
+
+ return (
+ <Paper
+ elevation={3}
+ sx={{
+ padding: 2,
+ maxHeight: height,
+ overflow: 'auto',
+ backgroundColor: theme.palette.background.paper,
+ borderRadius: 2,
+ }}
+ >
+ <pre style={{ margin: 0, fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
+ {json === 'Invalid JSON' ? (
+ <Typography color="error">Invalid JSON</Typography>
+ ) : (
+
+ <SyntaxHighlighter
+ language="json"
+ style={themeMode === 'dark' ? atomOneDark : xcode}
+ customStyle={{
+ backgroundColor: 'transparent',
+ padding: 0,
+ fontSize: '0.875rem', // 14px
+ fontFamily: 'monospace',
+ whiteSpace: 'pre-wrap',
+ wordBreak: 'break-word',
+ // fontWeight: 'bold',
+ }}
+ showLineNumbers
+ >
+ {json}
+ </SyntaxHighlighter>
+ // renderFormattedJson(json)
+ )}
+ </pre>
+ </Paper>
+ );
}
const renderFormattedJson = (json) => {
@@ -43,33 +95,5 @@
};
-const JsonShow = ({ data, height = 500 }) => {
- const theme = useTheme();
- const themeMode = theme.palette.mode;
-
- let json = parseJson(data);
-
- return (
- <Paper
- elevation={3}
- sx={{
- padding: 2,
- maxHeight: height,
- overflow: 'auto',
- backgroundColor: theme.palette.background.paper,
- borderRadius: 2,
- }}
- >
- <pre style={{ margin: 0, fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
- {json === 'Invalid JSON' ? (
- <Typography color="error">Invalid JSON</Typography>
- ) : (
- renderFormattedJson(json)
- )}
- </pre>
- </Paper>
- );
-
-}
export default JsonShow;
\ No newline at end of file
--
Gitblit v1.9.1