How to use the react-syntax-highlighter/prism-light.registerLanguage function in react-syntax-highlighter

// @flow
import * as React from 'react'

import SyntaxHighlighter, {
  registerLanguage,
} from 'react-syntax-highlighter/prism-light'
import js from 'react-syntax-highlighter/languages/prism/javascript'
import python from 'react-syntax-highlighter/languages/prism/python'
import bash from 'react-syntax-highlighter/languages/prism/bash'

import solarizedLight from 'react-syntax-highlighter/styles/prism/solarizedlight'

registerLanguage('python', python)
registerLanguage('javascript', js)
registerLanguage('bash', bash)

type Props = {
  children: React.Node,
  fontSize?: number,
  language?: string,
}

// Refer here for relevant props
// https://github.com/conorhastings/react-syntax-highlighter#props
const Code = ({ children, fontSize, language = 'javascript' }: Props) => {
  return (

import ReactDOM from 'react-dom';
import SyntaxHighlighter, {
  registerLanguage,
} from 'react-syntax-highlighter/prism-light';
import jsx from 'react-syntax-highlighter/languages/prism/jsx';
import okaidia from 'react-syntax-highlighter/styles/prism/okaidia';

const okaidiaTabSpace2 = {
  ...okaidia,
  'code[class*="language-"]': {
    ...okaidia['code[class*="language-"]'],
    tabSize: '2',
  },
};

registerLanguage('jsx', jsx);

class CodepenDefine extends React.Component {
  constructor(...args) {
    super(...args);
    this.handleCodepen = this.handleCodepen.bind(this);
  }

  handleCodepen() {
    const formDOMNode = ReactDOM.findDOMNode(this.form);
    if (formDOMNode) {
      formDOMNode.submit();
    }
  }

  render() {
    return (

import React from 'react';
import PropTypes from 'prop-types';

import SyntaxHighlighter, {
	registerLanguage,
} from 'react-syntax-highlighter/prism-light';
import jsx from 'react-syntax-highlighter/languages/prism/jsx';
import html from 'react-syntax-highlighter/languages/prism/markup';
import bash from 'react-syntax-highlighter/languages/prism/bash';
import scss from 'react-syntax-highlighter/languages/prism/scss';
import tomorrow from 'react-syntax-highlighter/styles/prism/tomorrow';

registerLanguage('js', jsx);
registerLanguage('jsx', jsx);
registerLanguage('html', html);
registerLanguage('bash', bash);
registerLanguage('scss', scss);

const CodeBlock = props => (
	
		{props.value}
	
);

import _ from 'lodash';
import React from 'react';
import PropTypes from 'prop-types';
import SyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/prism-light';
import jsx from 'react-syntax-highlighter/languages/prism/jsx';
import coy from 'react-syntax-highlighter/styles/prism/coy';

import PropTypeTable from '../PropTypeTable';
import { Button, InformationBox } from '../../../src';

import './styles.scss';

registerLanguage('jsx', jsx);

class Example extends React.PureComponent {
  render() {
    const { children, componentName, notes, exampleCodeSnippet, propTypeSectionArray, designNotes } = this.props;

    return (
      <div id="{`${_.kebabCase(componentName)}-example`}">
        <h2>{componentName}</h2>

        <h3>Example</h3>
        <div>{children}</div>

        <div></div></div>

import coy from 'react-syntax-highlighter/styles/prism/coy';

const coyCustom = {
  ...coy,
  'code[class*="language-"]': {
    ...coy['code[class*="language-"]'],
    tabSize: '2',
  },
  'pre[class*="language-"]': {
    ...coy['pre[class*="language-"]'],
    backgroundColor: '',
    fontSize: 12,
  },
};

registerLanguage('jsx', jsx);
registerLanguage('json', json);

const compile = marksy({
  createElement: React.createElement,
  highlight: (language, code) =>
    ReactDOMServer.renderToStaticMarkup(
      
        {code}
      
    ),
  elements: {
    p: props =&gt; <p style="{{">,
  },
});

const styles = {</p>

import React from 'react';
import { Code } from '@bandwidth/shared-components';
import SyntaxHighlighter, {
  registerLanguage,
} from 'react-syntax-highlighter/prism-light';
import jsx from 'react-syntax-highlighter/languages/prism/jsx';
import { tomorrow } from 'react-syntax-highlighter/styles/prism';

registerLanguage('jsx', jsx);

export default props => (
  
    
      {props.children}
    
  
);

const coyCustom = {
  ...coy,
  'code[class*="language-"]': {
    ...coy['code[class*="language-"]'],
    tabSize: '2',
  },
  'pre[class*="language-"]': {
    ...coy['pre[class*="language-"]'],
    backgroundColor: '',
    fontSize: 12,
  },
};

registerLanguage('jsx', jsx);
registerLanguage('json', json);

const compile = marksy({
  createElement: React.createElement,
  highlight: (language, code) =>
    ReactDOMServer.renderToStaticMarkup(
      
        {code}
      
    ),
  elements: {
    p: props =&gt; <p style="{{">,
  },
});

const style = {
  a: {</p>

import coy from 'react-syntax-highlighter/styles/prism/coy';

const coyCustom = {
	...coy,
	'code[class*="language-"]': {
		...coy['code[class*="language-"]'],
		tabSize: '2',
	},
	'pre[class*="language-"]': {
		...coy['pre[class*="language-"]'],
		backgroundColor: '',
		fontSize: 12,
	},
};

registerLanguage('jsx', jsx);
registerLanguage('json', json);

const compile = marksy({
	createElement: React.createElement,
	highlight: (language, code) =>
		ReactDOMServer.renderToStaticMarkup(
			
				{code}
			
		),
	elements: {
		p: props =&gt; <p style="{{">,
	},
});

const styles = {</p>

import React from 'react'

import SyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/prism-light'
import { solarizedlight } from 'react-syntax-highlighter/styles/prism'
import bash from 'react-syntax-highlighter/languages/prism/bash'
import css from 'react-syntax-highlighter/languages/prism/css-extras'
import jsx from 'react-syntax-highlighter/languages/prism/jsx'

registerLanguage('bash', bash)
registerLanguage('css', css)
registerLanguage('jsx', jsx)

export default function Code ({ children, ...props }) {
  return (
    
      {children}
    
  )
}