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

import React, {useState, useEffect} from 'react';
import {Light as SyntaxHighlighter} from 'react-syntax-highlighter';
// eslint-disable-next-line
import atomDark from 'react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark';

import python from 'react-syntax-highlighter/dist/esm/languages/hljs/python';
import matlab from 'react-syntax-highlighter/dist/esm/languages/hljs/python';
// eslint-disable-next-line
import dockerfile from 'react-syntax-highlighter/dist/esm/languages/hljs/dockerfile';
SyntaxHighlighter.registerLanguage('python', python);
SyntaxHighlighter.registerLanguage('dockerfile', dockerfile);
SyntaxHighlighter.registerLanguage('matlab', matlab);
import {useDebounce} from '../../utils/hooks';

const unknownCode = 'Nothing to see here, move along!';

async function recomputeCode(generator, nodes, links) {
  if (generator) {
    let code;
    try {
      code = await generator(nodes, links);
    } catch (error) {
      console.error('There was an error in your code generator: ', error);
      return unknownCode;
    }
    if (typeof code !== 'string') {
      console.error('The created code is not a string');
      return unknownCode;

import React, { FC } from 'react'
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'
import * as styles from 'react-syntax-highlighter/dist/esm/styles/hljs'
import * as languages from 'react-syntax-highlighter/dist/esm/languages/hljs'
import { Icon, Classes } from '@blueprintjs/core'
import { centerStyles, HEADER_HEIGHT } from './utils'

SyntaxHighlighter.registerLanguage('js', languages.javascript)
SyntaxHighlighter.registerLanguage('css', languages.css)
SyntaxHighlighter.registerLanguage('scss', languages.scss)
SyntaxHighlighter.registerLanguage('ts', languages.typescript)
SyntaxHighlighter.registerLanguage('json', languages.json)
SyntaxHighlighter.registerLanguage('md', languages.markdown)
SyntaxHighlighter.registerLanguage('txt', languages.plaintext)

const languageMap: { [key: string]: string } = {
  jsx: 'js',
  mjs: 'js',
  tsx: 'ts',
  '': 'txt',
}

export const Preview: FC<{ code?: string; ext: string }> = ({ code, ext }) => {
  if (code == null) {
    return (

import React, { useMemo } from 'react'

import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'
import sql from 'react-syntax-highlighter/dist/esm/languages/hljs/sql'
import lightTheme from 'react-syntax-highlighter/dist/esm/styles/hljs/atom-one-light'
import darkTheme from 'react-syntax-highlighter/dist/esm/styles/hljs/atom-one-dark-reasonable'
import Pre from '../Pre'
import formatSql from '@lib/utils/formatSql'
import moize from 'moize'

SyntaxHighlighter.registerLanguage('sql', sql)

interface Props {
  sql: string
  compact?: boolean
  theme?: 'dark' | 'light'
}

function simpleSqlMinify(str) {
  return str
    .replace(/\s{1,}/g, ' ')
    .replace(/\{\s{1,}/g, '{')
    .replace(/\}\s{1,}/g, '}')
    .replace(/;\s{1,}/g, ';')
    .replace(/\/\*\s{1,}/g, '/*')
    .replace(/\*\/\s{1,}/g, '*/')
}

import { docco } from 'react-syntax-highlighter/dist/cjs/styles/hljs'
import dvc from './lang/dvc'
import ini from 'react-syntax-highlighter/dist/cjs/languages/hljs/ini'
import kebabCase from 'lodash.kebabcase'
import linker from './utils/remark-linker'
import { media } from '../../../src/styles'
import python from 'react-syntax-highlighter/dist/cjs/languages/hljs/python'
import styled from 'styled-components'
import usage from './lang/usage'
import vim from 'react-syntax-highlighter/dist/cjs/languages/hljs/vim'
import yaml from 'react-syntax-highlighter/dist/cjs/languages/hljs/yaml'

SyntaxHighlighter.registerLanguage('dvc', dvc)
SyntaxHighlighter.registerLanguage('python', python)
SyntaxHighlighter.registerLanguage('usage', usage)
SyntaxHighlighter.registerLanguage('yaml', yaml)
SyntaxHighlighter.registerLanguage('ini', ini)
SyntaxHighlighter.registerLanguage('bash', bash)
SyntaxHighlighter.registerLanguage('vim', vim)
SyntaxHighlighter.registerLanguage('diff', diff)

function flatten(text, child) {
  return typeof child === 'string'
    ? text + child
    : React.Children.toArray(child.props.children).reduce(flatten, text)
}

const HeadingRenderer = ({ level, children }) => {
  const content = React.Children.toArray(children)
  const text = children.reduce(flatten, '')
  const slug = kebabCase(text)
  const anchor =

import sqlLang from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql'
import solarizedLight from 'react-syntax-highlighter/dist/cjs/styles/hljs/solarized-light'
import solarizedDark from 'react-syntax-highlighter/dist/cjs/styles/hljs/solarized-dark'
import CopyButton from 'components/copyButton'
import {OS_LINUX} from 'reducers/configuration/constants'
import {
  APP_THEMES_LIGHT,
  APP_THEMES_DARK,
  TAB_CONFIG,
  TAB_ALTER_SYSTEM,
  TAB_KERNEL_INFO
} from 'reducers/settings/constants'

import './configuration-view.sass'

SyntaxHighlighter.registerLanguage('ini', iniLang)
SyntaxHighlighter.registerLanguage('sql', sqlLang)

const KB_UNIT_MAP = {
  KB_PER_MB: 1024,
  KB_PER_GB: 1048576
}

export default class ConfigurationView extends React.Component {
  static propTypes = {
    dbVersion: PropTypes.number.isRequired,
    osType: PropTypes.string.isRequired,
    dbType: PropTypes.string.isRequired,
    totalMemory: PropTypes.number.isRequired,
    totalMemoryUnit: PropTypes.string.isRequired,
    cpuNum: PropTypes.number,
    connectionNum: PropTypes.number,

import React from 'react';
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
import py from 'react-syntax-highlighter/dist/esm/languages/hljs/python';
import sh from 'react-syntax-highlighter/dist/esm/languages/hljs/shell';
import { androidstudio } from 'react-syntax-highlighter/dist/esm/styles/hljs';

SyntaxHighlighter.registerLanguage('javascript', js);
SyntaxHighlighter.registerLanguage('python', py);
SyntaxHighlighter.registerLanguage('shell', sh);

/*
  This is the main component that contains content for the documentation.
  The docs page is comprised of multiple Topic components.
  Each Topic component has containing html as child components which are rendered
  on the left side.
  Topic component also takes in a codeExamples prop which are the code examples
  that are show on the right side
*/

/*
  Maybe we can create the sidebar manually?
  by creating and ordering React Components according to the structure of
  the page and we can

import ini from 'react-syntax-highlighter/dist/cjs/languages/hljs/ini'
import kebabCase from 'lodash.kebabcase'
import linker from './utils/remark-linker'
import { media } from '../../../src/styles'
import python from 'react-syntax-highlighter/dist/cjs/languages/hljs/python'
import styled from 'styled-components'
import usage from './lang/usage'
import vim from 'react-syntax-highlighter/dist/cjs/languages/hljs/vim'
import yaml from 'react-syntax-highlighter/dist/cjs/languages/hljs/yaml'

SyntaxHighlighter.registerLanguage('dvc', dvc)
SyntaxHighlighter.registerLanguage('python', python)
SyntaxHighlighter.registerLanguage('usage', usage)
SyntaxHighlighter.registerLanguage('yaml', yaml)
SyntaxHighlighter.registerLanguage('ini', ini)
SyntaxHighlighter.registerLanguage('bash', bash)
SyntaxHighlighter.registerLanguage('vim', vim)
SyntaxHighlighter.registerLanguage('diff', diff)

function flatten(text, child) {
  return typeof child === 'string'
    ? text + child
    : React.Children.toArray(child.props.children).reduce(flatten, text)
}

const HeadingRenderer = ({ level, children }) => {
  const content = React.Children.toArray(children)
  const text = children.reduce(flatten, '')
  const slug = kebabCase(text)
  const anchor =
    level !== 1 ? (
      <a href="{`#${slug}`}" aria-hidden="true"></a>

import React from 'react'
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'
import { monokai } from 'react-syntax-highlighter/dist/esm/styles/hljs'
import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript'
import bash from 'react-syntax-highlighter/dist/esm/languages/hljs/bash'
import html from 'react-syntax-highlighter/dist/esm/languages/hljs/vbscript-html'
import Button from 'react-materialize/lib/Button'
import MaterialIcon from '../MaterialIcon/MaterialIcon'
import M from 'materialize-css'
import Tooltip from 'react-simple-tooltip'

import './Code.scss'

SyntaxHighlighter.registerLanguage('javascript', js)
SyntaxHighlighter.registerLanguage('bash', bash)
SyntaxHighlighter.registerLanguage('html', html)

const Code = (props) => {

  const copy = (text, cb) => {
    const el = document.createElement('textarea');
    el.value = text;
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
    if (cb) cb()
  }

  return (
    <div></div>

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'
import jsonLang from 'react-syntax-highlighter/dist/languages/hljs/json'
import highlightColors from 'react-syntax-highlighter/dist/styles/hljs/github'
import BusySpinner from '../BusySpinner/BusySpinner'
import _get from 'lodash/get'

SyntaxHighlighter.registerLanguage('json', jsonLang);

export default class ViewTask extends Component {
  render() {
    if (!_get(this.props, 'task.geometries')) {
      return 
    }

    return (
      <div>
        
          {JSON.stringify(this.props.task.geometries, null, 4)}
        
      </div>
    )
  }
}

import React, { FC } from 'react'
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'
import * as styles from 'react-syntax-highlighter/dist/esm/styles/hljs'
import * as languages from 'react-syntax-highlighter/dist/esm/languages/hljs'
import { Icon, Classes } from '@blueprintjs/core'
import { centerStyles, HEADER_HEIGHT } from './utils'

SyntaxHighlighter.registerLanguage('js', languages.javascript)
SyntaxHighlighter.registerLanguage('css', languages.css)
SyntaxHighlighter.registerLanguage('scss', languages.scss)
SyntaxHighlighter.registerLanguage('ts', languages.typescript)
SyntaxHighlighter.registerLanguage('json', languages.json)
SyntaxHighlighter.registerLanguage('md', languages.markdown)
SyntaxHighlighter.registerLanguage('txt', languages.plaintext)

const languageMap: { [key: string]: string } = {
  jsx: 'js',
  mjs: 'js',
  tsx: 'ts',
  '': 'txt',
}

export const Preview: FC<{ code?: string; ext: string }> = ({ code, ext }) => {
  if (code == null) {
    return (