react-syntax-highlighter-editable

1. Supply initial code in props
2. Use the render prop, renderSH to render the syntax highlighter

Typing in the textarea will change the code for the rendered syntax highlighter.

import * as React from "react";
export interface EditableRSHProps{
  renderSH:(code:string) => React.ReactNode,
  initialCode:string,
  rows:number,
  columns:number
}
export interface EditableRSHState{
  code:string
}

export class EditableRSH extends React.Component<EditableRSHProps,EditableRSHState>{
  constructor(props:EditableRSHProps){
    super(props);
    this.state = {code:props.initialCode}
  }
  codeChanged = (evt:any) => {
    this.setState({code:evt.target.value});
  }
  render(){
    return <div style={{display:'flex'}}>
      <textarea 
        style={{flex:'1 1 0%'}} 
        rows={this.props.rows} 
        cols={this.props.columns} 
        onChange={this.codeChanged} 
        value={this.state.code}/>
      <div style={{flex:'1 1 0%', width:'50%'}}>
      {this.props.renderSH(this.state.code)}
      </div>
    </div>
  }
}