json blocks
This commit is contained in:
parent
98426f94f8
commit
444941e169
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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",
|
||||
|
22
yarn.lock
22
yarn.lock
@ -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==
|
||||
|
Loading…
Reference in New Issue
Block a user