import React, { Component } from 'react';
import { Highlight } from 'react-fast-highlight';

class App extends Component {

  render() {
    const code = 'let t = 0.5 * 5 * 4;';

    return (
      {/*
            `languages` is an optional property to set the languages that highlight.js should pick from.
            By default it is empty, which means highlight.js will pick from all available languages.
            If only one language is provided, this language will be used without doing checks beforehand.
            (Be aware that automatic language detection is not as fast as when specifing a language.)

            `worker` is used to take advantage of the possibility to do the highlighting work in a
            web-worker. As different module-bundlers use different ways to load web-workers, it is up
            to you to load the webworker and supply it to the highlight component. (see example)
            Currently every instance of the highlight component needs its own web-worker.

            `className` sets additional class names on the generated html markup.
       */}
      <Highlight
        languages={['js']}
        className="my-class"
      >
        {code}
      </Highlight>
    );
}

import hljs from 'highlight.js/lib/highlight';

// Lets only register javascript, scss, html/xml
hljs.registerLanguage('scss', require('highlight.js/lib/languages/scss'));
hljs.registerLanguage('javascript', require('highlight.js/lib/languages/javascript'));
hljs.registerLanguage('xml', require('highlight.js/lib/languages/xml'));

export default hljs;

import React, { Component } from 'react';
import BareHighlight from 'react-fast-highlight/lib/js/BareHighlight';
import hljs from './customhljs';

class CustomHighlight extends Component {
  render() {
    const { children, ...props } = this.props;
    return (
      <BareHighlight {...props} highlightjs={hljs}>
        {children}
      </BareHighlight>
    );
}

import React from 'react';
import { Highlight } from 'react-fast-highlight';
import Worker from 'worker!react-fast-highlight/lib/js/worker';

class App extends React.Component {

  render() {
    const code = 'let t = 0.5 * 5 * 4;';

    return (
      <Highlight
        languages={['js']}
        worker={new Worker}
      >
        {code}
      </Highlight>
    );
}