react-context/docs/components/common/Code.jsx

Helpful Properties with React Context

/* jshint node: true, esnext: true */
"use strict";

var React = require('react');
var ReactCSS = require('reactcss');
var markdown = require('../../helpers/markdown');
var context = require('react-context');

var { Tile } = require('react-material-design');



class Code extends ReactCSS.Component {

  constructor() {
    super();
  }

  classes() {
    return {
      'default': {
        shortCodeBlock: {
          display: 'inline-block'
        },
        shortCode: {
          padding: '14px 16px'
        },
        head: {
          borderRadius: '2px 2px 0 0',
          background: '#fafafa'
        },
        files: {
          display: 'inline-block'
        },
        Files: {
          align: 'none',
          color: '#666'
        },
        center: {
          fontFamily: 'Monaco',
          fontSize: '14px',
          lineHeight: '19px',
          color: 'rgba(0,0,0,.77)'
        },
        numbers: {
          fontSize: '14px',
          lineHeight: '19px',
          display: 'inline-block',
          textAlign: 'right',
          color: 'rgba(0,0,0,.20)',
          userSelect: 'none',
          paddingLeft: '7px'
        },
      },
      'condensed': {
        Tile: {
          condensed: true
        },
        center: {
          paddingTop: '16px',
          paddingBottom: '16px',
          fontSize: '13px',
          lineHeight: '15px',
          overflowX: 'scroll'
        },
        numbers: {
          paddingTop: '16px',
          fontSize: '13px',
          lineHeight: '15px'
        }
      },
      'borders': {
        code: {
          borderTop: '1px solid #eee',
          borderBottom: '1px solid #eee'
        }
      }
    };
  }

  styles() {
    return this.css({
      'condensed': this.context.width < 500
    });
  }

  render() {
    var code = markdown.getBody( this.props.file );
    var args = markdown.getArgs( this.props.file );
    var colorCoded = markdown.renderCode('```\n' + code + '```').trim();
    var lineCount = colorCoded.split('\n').length;

    var lines;
    if (args.lineDecoration) {
      lines = args.lineDecoration;
    } else {
      lines = [];
      for (var i = 1; i < lineCount; i++) {
        lines.push(<div key={ i }>{ i }</div>);
      }
    }

    return (
      <div is="code">

        <style>{`
          .rendered{
            color: #607D8B; // blue grey 500
          }
          .rendered .hljs-comment {
            color: #B0BEC5; // blue grey 200
          }
          .rendered .hljs-keyword{
            color: #EF9A9A;  // red 200
          }
          .rendered .hljs-string{
            color: #689F38; // light green 700
          }
          .rendered .hljs-title{
          }
        `}</style>

        <Tile is="Tile">
          <div is="numbers">
            { lines }
          </div>
          <div is="center">
            <style>{`
              .rendered pre{
                margin: 0;
              }
              .rendered p{
                margin: 0;
              }
            `}</style>
            <div className="rendered" dangerouslySetInnerHTML={{ __html: colorCoded }} />
          </div>
        </Tile>


      </div>
    );
  }
}

Code.contextTypes = context.subscribe(['width']);

module.exports = Code