dash-core-components/src/components/SyntaxHighlighter.react.js

Core component suite for Dash

import {arduinoLight, monokai} from 'react-syntax-highlighter/dist/styles';
import {omit} from 'ramda';
import React, {PropTypes} from 'react';
import ReactSyntaxHighlighter from 'react-syntax-highlighter';

/**
 * A component for pretty printing code.
 */
export default function SyntaxHighlighter(props) {
    const {theme} = props;
    let style;
    if(theme === 'dark') {
        style = monokai;
    } else {
        style = arduinoLight;
    }
    return (
        <ReactSyntaxHighlighter
            style={style}
            {...omit(['theme'], props)}
        />
    )
}


SyntaxHighlighter.propTypes = {
    id: PropTypes.string,
    /**
     * The text to display and highlight
     */
    children: PropTypes.string,

    /**
     * the language to highlight code in.
     */
    language: PropTypes.string,
    /**
     * theme: light or dark
     */
    theme: PropTypes.oneOf(['light', 'dark']),

    /**
     * prop that will be combined with the top level style on the pre tag, styles here will overwrite earlier styles.
     */
    customStyle: PropTypes.object,
    /**
     * props that will be spread into the <code> tag that is the direct parent of the highlighted code elements. Useful for styling/assigning classNames.
     */
    codeTagProps: PropTypes.object,
    /**
     * if this prop is passed in as false, react syntax highlighter will not add style objects to elements, and will instead append classNames. You can then style the code block by using one of the CSS files provided by highlight.js.
     */
    useInlineStyles: PropTypes.bool,
    /**
     * if this is enabled line numbers will be shown next to the code block.
     */
    showLineNumbers: PropTypes.bool,
    /**
     * if showLineNumbers is enabled the line numbering will start from here.
     */
    startingLineNumber: PropTypes.bool,
    /**
     * the line numbers container default to appearing to the left with 10px of right padding. You can use this to override those styles.
     */
    lineNumberContainerStyle: PropTypes.object,
    /**
     * inline style to be passed to the span wrapping each number. Can be either an object or a function that recieves current line number as argument and returns style object.
     */
    lineNumberStyle: PropTypes.object,
    /**
     * a boolean value that determines whether or not each line of code should be wrapped in a parent element. defaults to false, when false one can not take action on an element on the line level. You can see an example of what this enables here
     */
    wrapLines: PropTypes.bool,
    /**
     * inline style to be passed to the span wrapping each line if wrapLines is true. Can be either an object or a function that recieves current line number as argument and returns style object.
     */
    lineStyle: PropTypes.object
}