2 * Created by onvelocity on 2/2/16.
5 import React
from 'react'
6 import Prism
from 'prismjs'
7 import PureRenderMixin
from 'react-addons-pure-render-mixin'
9 import './JSONViewer.scss'
11 const YAML
= require('json2yaml');
19 copied from node_modules/prismjs/themes/prismjs.css
21 :not(pre) > code[class*="language-"],
22 pre[class*="language-"] {
26 border: 1px solid rgba(220, 220, 220, 0.5);
29 background-color: rgba(255, 255, 255, .25);
33 :not(pre) > code[class*="language-"] {
74 .language-css .token.string,
75 .style .token.string {
108 const JSONViewer
= React
.createClass({
109 mixins
: [PureRenderMixin
],
110 getInitialState: function () {
113 getDefaultProps: function () {
116 componentWillMount: function () {
118 componentDidMount: function () {
120 componentDidUpdate: function () {
122 componentWillUnmount: function () {
125 const text
= YAML
.stringify(this.props
.json
, undefined, 12).replace(/ /g
, ' ');
126 const result
= Prism
.highlight(text
, Prism
.languages
.javascript
, 'javascript');
128 <div className
="JSONViewer">
129 <style dangerouslySetInnerHTML
={{__html
: cssString
}}></style
>
130 <label className
="descriptor">
131 <pre className
="language-js">
132 <code dangerouslySetInnerHTML
={{__html
: result
}} />
140 export default JSONViewer
;