All files / src/components/elements/HighlightedJson HighlightedJson.tsx

0% Statements 0/7
0% Branches 0/6
0% Functions 0/1
0% Lines 0/7

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>
  );
};