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

MuiThemeProvider,
  createGenerateClassName,
  jssPreset
} from '@material-ui/core/styles';
import {create} from 'jss';
import {registerLanguage} from 'react-syntax-highlighter/light';

const generateClassName = createGenerateClassName();
const jss = create(jssPreset());
// we define a custom insertion point that JSS will look for injecting the styles in the DOM
jss.options.insertionPoint = 'jss-insertion-point';

injectStyles();

registerLanguage('less', less);
registerLanguage('stylus', stylus);

ReactDOM.render(
  
    
      
      
    
  ,
  document.getElementById('root')
);

import ReactMarkdown from 'react-markdown'
// import SyntaxHighlighter from 'react-syntax-highlighter'
// import { docco } from 'react-syntax-highlighter/styles/hljs'
import SyntaxHighlighter, { registerLanguage } from "react-syntax-highlighter/light";
import js from 'react-syntax-highlighter/languages/hljs/javascript';
import css from 'react-syntax-highlighter/languages/hljs/css';
import docco from 'react-syntax-highlighter/styles/hljs/docco'; 

registerLanguage('js', js)
registerLanguage('css', css)

export default function Markdown({ children }) {
  return 
}

function CodeBlock({ language, value }) {
  return {value}
}

import ReactMarkdown from 'react-markdown'
// import SyntaxHighlighter from 'react-syntax-highlighter'
// import { docco } from 'react-syntax-highlighter/styles/hljs'
import SyntaxHighlighter, { registerLanguage } from "react-syntax-highlighter/light";
import js from 'react-syntax-highlighter/languages/hljs/javascript';
import css from 'react-syntax-highlighter/languages/hljs/css';
import docco from 'react-syntax-highlighter/styles/hljs/docco'; 

registerLanguage('js', js)
registerLanguage('css', css)

export default function Markdown({ children }) {
  return 
}

function CodeBlock({ language, value }) {
  return {value}
}

getSyntaxHighlighting,
  getValidateHtmlXml,
  getValidateNewLine,
  getValidateTab,
  getValidateJavaVariables,
  getValidateXmlEntity,
  getValidatePrintfVariables,
  getValidatePrintfXsi
} from '../reducers'
import SyntaxHighlighter, { registerLanguage }
  from 'react-syntax-highlighter/light'
import Validation, { getValidationMessages } from './Validation/index.tsx'
import xml from 'react-syntax-highlighter/languages/hljs/xml'
import { atelierLakesideLight } from 'react-syntax-highlighter/styles/hljs'

registerLanguage('xml', xml)

const DO_NOT_RENDER = undefined

/**
 * Panel to display and edit translations of a phrase.
 */
class TransUnitTranslationPanel extends React.Component {
  static propTypes = {
    cancelEdit: PropTypes.func.isRequired,
    glossaryCount: PropTypes.number.isRequired,
    glossaryVisible: PropTypes.bool.isRequired,
    intl: intlShape.isRequired,
    isRTL: PropTypes.bool.isRequired,
    onSelectionChange: PropTypes.func.isRequired,
    onValidationErrorChange: PropTypes.func.isRequired,
    // the key of the currently open dropdown (may be undefined if none is open)

} from 'react-bootstrap';
import { Table } from 'reactable-arc';
import { t } from '@superset-ui/translation';
import { SupersetClient } from '@superset-ui/connection';

import getClientErrorObject from '../../utils/getClientErrorObject';
import CopyToClipboard from './../../components/CopyToClipboard';
import { getExploreUrlAndPayload } from '../exploreUtils';

import Loading from '../../components/Loading';
import ModalTrigger from './../../components/ModalTrigger';
import Button from '../../components/Button';
import RowCountLabel from './RowCountLabel';
import { prepareCopyToClipboardTabularData } from '../../utils/common';

registerLanguage('markdown', markdownSyntax);
registerLanguage('html', htmlSyntax);
registerLanguage('sql', sqlSyntax);
registerLanguage('json', jsonSyntax);

const propTypes = {
  onOpenInEditor: PropTypes.func,
  animation: PropTypes.bool,
  queryResponse: PropTypes.object,
  chartStatus: PropTypes.string,
  latestQueryFormData: PropTypes.object.isRequired,
};
const defaultProps = {
  animation: true,
};

export default class DisplayQueryButton extends React.PureComponent {

import React from 'react'
import PropTypes from 'prop-types'
import { PropTypes as MobxPropTypes } from 'mobx-react'
import SyntaxHighlighter, {
  registerLanguage,
} from 'react-syntax-highlighter/light'
import fortran from 'react-syntax-highlighter/languages/hljs/fortran'
import stylus from 'react-syntax-highlighter/languages/hljs/stylus'
import ini from 'react-syntax-highlighter/languages/hljs/ini'
import { xcode } from 'react-syntax-highlighter/styles/hljs'
import AutoComplete from '../AutoComplete'
import Input from '../FormInput'
import './style.css'

registerLanguage('fortran', fortran)
registerLanguage('stylus', stylus)
registerLanguage('ini', ini)

export default class TargetInput extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    targets: MobxPropTypes.arrayOrObservableArray,
    disabled: PropTypes.bool,
    value: PropTypes.string,
    onChange: PropTypes.func,
  }
  render() {
    return this.props.targets && this.props.targets.length ? (

import { SupersetClient } from '@superset-ui/connection';

import getClientErrorObject from '../../utils/getClientErrorObject';
import CopyToClipboard from './../../components/CopyToClipboard';
import { getExploreUrlAndPayload } from '../exploreUtils';

import Loading from '../../components/Loading';
import ModalTrigger from './../../components/ModalTrigger';
import Button from '../../components/Button';
import RowCountLabel from './RowCountLabel';
import { prepareCopyToClipboardTabularData } from '../../utils/common';

registerLanguage('markdown', markdownSyntax);
registerLanguage('html', htmlSyntax);
registerLanguage('sql', sqlSyntax);
registerLanguage('json', jsonSyntax);

const propTypes = {
  onOpenInEditor: PropTypes.func,
  animation: PropTypes.bool,
  queryResponse: PropTypes.object,
  chartStatus: PropTypes.string,
  latestQueryFormData: PropTypes.object.isRequired,
};
const defaultProps = {
  animation: true,
};

export default class DisplayQueryButton extends React.PureComponent {
  constructor(props) {
    super(props);
    const { datasource } = props.latestQueryFormData;

import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import Table from './Table';
import HarDetails from './HarDetails';
import HarUtils from '../services/HarUtils';
import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
import {GraphqlCodeBlock} from 'graphql-syntax-highlighter-react';
import SyntaxHighlighter, {registerLanguage} from "react-syntax-highlighter/light"
import json from 'react-syntax-highlighter/languages/hljs/json';
import {githubGist} from 'react-syntax-highlighter/styles/hljs';

registerLanguage('json', json);

import './styles/react-tabs.scss';
import './styles/app.scss';


export default class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            har: null,
            query: 'query {graphQLHub}',
            variables: '{}',
            response: '',
            showRight: false
        };

import { Table } from 'reactable-arc';
import { t } from '@superset-ui/translation';
import { SupersetClient } from '@superset-ui/connection';

import getClientErrorObject from '../../utils/getClientErrorObject';
import CopyToClipboard from './../../components/CopyToClipboard';
import { getExploreUrlAndPayload } from '../exploreUtils';

import Loading from '../../components/Loading';
import ModalTrigger from './../../components/ModalTrigger';
import Button from '../../components/Button';
import RowCountLabel from './RowCountLabel';
import { prepareCopyToClipboardTabularData } from '../../utils/common';

registerLanguage('markdown', markdownSyntax);
registerLanguage('html', htmlSyntax);
registerLanguage('sql', sqlSyntax);
registerLanguage('json', jsonSyntax);

const propTypes = {
  onOpenInEditor: PropTypes.func,
  animation: PropTypes.bool,
  queryResponse: PropTypes.object,
  chartStatus: PropTypes.string,
  latestQueryFormData: PropTypes.object.isRequired,
};
const defaultProps = {
  animation: true,
};

export default class DisplayQueryButton extends React.PureComponent {
  constructor(props) {

import React from 'react'
import PropTypes from 'prop-types'
import { PropTypes as MobxPropTypes } from 'mobx-react'
import SyntaxHighlighter, {
  registerLanguage,
} from 'react-syntax-highlighter/light'
import fortran from 'react-syntax-highlighter/languages/hljs/fortran'
import stylus from 'react-syntax-highlighter/languages/hljs/stylus'
import ini from 'react-syntax-highlighter/languages/hljs/ini'
import { xcode } from 'react-syntax-highlighter/styles/hljs'
import AutoComplete from '../AutoComplete'
import Input from '../FormInput'
import './style.css'

registerLanguage('fortran', fortran)
registerLanguage('stylus', stylus)
registerLanguage('ini', ini)

export default class TargetInput extends React.Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    label: PropTypes.string.isRequired,
    targets: MobxPropTypes.arrayOrObservableArray,
    disabled: PropTypes.bool,
    value: PropTypes.string,
    onChange: PropTypes.func,
  }
  render() {
    return this.props.targets && this.props.targets.length ? (