Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | import * as React from "react"; import { Card } from "rimble-ui"; import styled from "styled-components"; import Prism from "prismjs"; import "prismjs/components/prism-json"; import { fonts, colors } from "../../../themes/"; export const PrismHighlightedCodeWrap = styled(Card)` background: ${colors.nearWhite}; border: ${colors.nearWhite}; flex-grow: 1; overflow: auto; font-size: 12px; font-family: ${fonts.monospace}; border-radius: 4px; box-shadow: none; pre { margin: 0; } .token.property { color: #905; } .token.string { color: #07a; } .token.punctuation { color: #999; } .token.boolean, .token.number { color: #690; } .token.operator { color: #9a6e3a; } .token.comment { color: slategray; } textarea { outline: 0; } `; export interface HighlightedJsonProps { json: string | { [key: string]: any }; alreadyPrettified?: boolean; style?: any; } export const HighlightedJson: React.FunctionComponent<HighlightedJsonProps> = (props) => { let jsonString; if (typeof props.json === "string") { jsonString = props.alreadyPrettified ? props.json : JSON.stringify(JSON.parse(props.json), null, 2); } else { jsonString = JSON.stringify(props.json, null, 2); } const jsonHtml = jsonString && Prism.highlight(jsonString, Prism.languages.json, "json"); return ( <PrismHighlightedCodeWrap style={props.style}> <pre> <code dangerouslySetInnerHTML={{ __html: jsonHtml }}></code> </pre> </PrismHighlightedCodeWrap> ); }; |