How to use react-syntax-highlighter - 10 common examples

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;

/* eslint-disable react/no-multi-comp */
import './home.sass'

import { Block } from 'bemboo'
import React from 'react'
import { storiesOf } from '@storybook/react'
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx'
import sass from 'react-syntax-highlighter/dist/esm/languages/prism/sass'
import prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism'

import Formol, { Conditional, Field, Inliner } from '../src'
import pkg from '../package.json'

SyntaxHighlighter.registerLanguage('jsx', jsx)
SyntaxHighlighter.registerLanguage('sass', sass)

const dedent = (strs, ...values) => {
  const str = strs
    .reduce((s, part, i) => s + values[i - 1] + part)
    .replace(/^\n/, '')
  const level = str.length - str.replace(/^ +/, '').length
  return str
    .split('\n')
    .map(line => line.slice(level))
    .join('\n')
}

const Exemple1 = () => (

/* eslint-disable react/no-multi-comp */
import './home.sass'

import { Block } from 'bemboo'
import React from 'react'
import { storiesOf } from '@storybook/react'
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx'
import sass from 'react-syntax-highlighter/dist/esm/languages/prism/sass'
import prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism'

import Formol, { Conditional, Field, Inliner } from '../src'
import pkg from '../package.json'

SyntaxHighlighter.registerLanguage('jsx', jsx)
SyntaxHighlighter.registerLanguage('sass', sass)

const dedent = (strs, ...values) => {
  const str = strs
    .reduce((s, part, i) => s + values[i - 1] + part)
    .replace(/^\n/, '')
  const level = str.length - str.replace(/^ +/, '').length
  return str
    .split('\n')
    .map(line => line.slice(level))
    .join('\n')
}

const Exemple1 = () => (
  
      // eslint-disable-next-line no-alert

import React from 'react'
import styled from 'styled-components'

import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter'
import js from 'react-syntax-highlighter/dist/esm/languages/prism/javascript'
import jsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx'
import ts from 'react-syntax-highlighter/dist/esm/languages/prism/typescript'
import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx'
import prism from 'react-syntax-highlighter/dist/esm/styles/prism/prism'

SyntaxHighlighter.registerLanguage('js', js)
SyntaxHighlighter.registerLanguage('javascript', js)
SyntaxHighlighter.registerLanguage('jsx', jsx)
SyntaxHighlighter.registerLanguage('ts', ts)
SyntaxHighlighter.registerLanguage('typescript', ts)
SyntaxHighlighter.registerLanguage('tsx', tsx)

const CodeBlock: React.FC<{
  language: 'js' | 'javascript' | 'jsx' | 'ts' | 'typescript' | 'tsx'
  style?: React.CSSProperties
  className?: string
}> = ({ language, style, children, className }) => {
  let actualLanguage = language
  if (!actualLanguage && typeof className === 'string') {
    // try to infer language from classname like: 'language-javascript'
    for (const classN of className.split(' ')) {
      const match = classN.match(/^language-(.*)$/)
      if (match) {
        actualLanguage = match[1] as any

// @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 React from 'react';
import PropTypes from 'prop-types';
import { withTheme } from 'styled-components';
import SyntaxHighlighter, {
  registerLanguage,
} from 'react-syntax-highlighter/dist/light';
import js from 'highlight.js/lib/languages/javascript';
import cpp from 'highlight.js/lib/languages/cpp';
import arduino from 'highlight.js/lib/languages/arduino';
import gist from 'react-syntax-highlighter/styles/hljs/github-gist';

registerLanguage('javascript', js);
registerLanguage('cpp', cpp); // Remind: for arduino
registerLanguage('arduino', arduino);

const Code = withTheme(({ style, theme, ...otherProps }) => (
  
));

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)