json blocks

This commit is contained in:
Dexter 2022-02-18 17:45:16 +00:00 committed by Dexter Edwards
parent 98426f94f8
commit 444941e169
3 changed files with 50 additions and 6 deletions

View File

@ -1,5 +1,7 @@
import { gql, useQuery } from "@apollo/client";
import { MarketsQuery } from "./__generated__/MarketsQuery";
import { gql, useQuery } from '@apollo/client';
import { MarketsQuery } from './__generated__/MarketsQuery';
import SyntaxHighlighter from 'react-syntax-highlighter';
const MARKETS_QUERY = gql`
query MarketsQuery {
@ -141,12 +143,37 @@ const MARKETS_QUERY = gql`
}
`;
const vegaJsonTheme = {
hljs: {
fontSize: '1rem',
display: 'block',
overflowX: 'auto',
padding: '1em',
color: '#26ff8a',
background: '#2C2C2C',
border: '1px solid #696969',
},
'hljs-literal': {
color: '#ff2d5e',
},
'hljs-number': {
color: '#ff7a1a',
},
'hljs-string': {
color: '#48aff0',
},
};
const Markets = () => {
const { data } = useQuery<MarketsQuery>(MARKETS_QUERY);
return (
<section>
<h1>Markets</h1>
<pre>{JSON.stringify(data, null, " ")}</pre>
{data && (
<SyntaxHighlighter language="json" style={vegaJsonTheme}>
{JSON.stringify(data, null, ' ')}
</SyntaxHighlighter>
)}
</section>
);
};

View File

@ -24,6 +24,7 @@
"next": "12.0.7",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-syntax-highlighter": "^15.4.5",
"react-use-websocket": "^3.0.0",
"regenerator-runtime": "0.13.7",
"tslib": "^2.0.0",

View File

@ -10082,7 +10082,7 @@ header-case@^2.0.4:
capital-case "^1.0.4"
tslib "^2.0.3"
highlight.js@^10.1.1, highlight.js@~10.7.0:
highlight.js@^10.1.1, highlight.js@^10.4.1, highlight.js@~10.7.0:
version "10.7.3"
resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
@ -12320,7 +12320,7 @@ lower-case@^2.0.2:
dependencies:
tslib "^2.0.3"
lowlight@^1.14.0:
lowlight@^1.14.0, lowlight@^1.17.0:
version "1.20.0"
resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.20.0.tgz#ddb197d33462ad0d93bf19d17b6c301aa3941888"
integrity sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==
@ -14233,6 +14233,11 @@ prismjs@^1.21.0:
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.26.0.tgz#16881b594828bb6b45296083a8cbab46b0accd47"
integrity sha512-HUoH9C5Z3jKkl3UunCyiD5jwk0+Hz0fIgQ2nbwU2Oo/ceuTAQAg+pPVnfdt2TJWRVLcxKh9iuoYDUSc8clb5UQ==
prismjs@^1.25.0:
version "1.27.0"
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.27.0.tgz#bb6ee3138a0b438a3653dd4d6ce0cc6510a45057"
integrity sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA==
prismjs@~1.25.0:
version "1.25.0"
resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.25.0.tgz#6f822df1bdad965734b310b315a23315cf999756"
@ -14665,6 +14670,17 @@ react-syntax-highlighter@^13.5.3:
prismjs "^1.21.0"
refractor "^3.1.0"
react-syntax-highlighter@^15.4.5:
version "15.4.5"
resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.4.5.tgz#db900d411d32a65c8e90c39cd64555bf463e712e"
integrity sha512-RC90KQTxZ/b7+9iE6s9nmiFLFjWswUcfULi4GwVzdFVKVMQySkJWBuOmJFfjwjMVCo0IUUuJrWebNKyviKpwLQ==
dependencies:
"@babel/runtime" "^7.3.1"
highlight.js "^10.4.1"
lowlight "^1.17.0"
prismjs "^1.25.0"
refractor "^3.2.0"
react-test-renderer@17.0.2:
version "17.0.2"
resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.2.tgz#4cd4ae5ef1ad5670fc0ef776e8cc7e1231d9866c"
@ -14800,7 +14816,7 @@ redeyed@~2.1.0:
dependencies:
esprima "~4.0.0"
refractor@^3.1.0:
refractor@^3.1.0, refractor@^3.2.0:
version "3.5.0"
resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.5.0.tgz#334586f352dda4beaf354099b48c2d18e0819aec"
integrity sha512-QwPJd3ferTZ4cSPPjdP5bsYHMytwWYnAN5EEnLtGvkqp/FCCnGsBgxrm9EuIDnjUC3Uc/kETtvVi7fSIVC74Dg==