@discostudioteam/react-code-blocks/dist/react-code-blocks.esm.js

Modified rajinwonderland's modification of Atlaskit's Code Block!

import React, { PureComponent, useState, useEffect, useCallback, useRef, useContext, useMemo } from 'react';
import styled, { withTheme, ThemeContext } from 'styled-components';
import { PrismAsyncLight } from 'react-syntax-highlighter';

function _extends() {
  _extends = Object.assign ? Object.assign.bind() : function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };
  return _extends.apply(this, arguments);
}

function _inheritsLoose(subClass, superClass) {
  subClass.prototype = Object.create(superClass.prototype);
  subClass.prototype.constructor = subClass;

  _setPrototypeOf(subClass, superClass);
}

function _setPrototypeOf(o, p) {
  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
    o.__proto__ = p;
    return o;
  };
  return _setPrototypeOf(o, p);
}

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

function _taggedTemplateLiteralLoose(strings, raw) {
  if (!raw) {
    raw = strings.slice(0);
  }

  strings.raw = raw;
  return strings;
}

var DEFAULT_THEME_MODE = 'light'; // Resolves the different types of theme objects in the current API

function getTheme(props) {
  // If format not supported (or no theme provided), return standard theme
  return _extends({
    mode: DEFAULT_THEME_MODE
  }, props === null || props === void 0 ? void 0 : props.theme);
}

function themed(modesOrVariant) {
  var modes = modesOrVariant;
  return function (props) {
    var theme = getTheme(props);
    return modes[theme.mode];
  };
}

var defaultColors = function defaultColors(theme) {
  var rcbTheme = {
    theme: theme
  };
  return {
    lineNumberColor: themed({
      light: "#383a42",
      dark: "#abb2bf"
    })(rcbTheme),
    lineNumberBgColor: themed({
      light: "#fafafa",
      dark: "#282c34"
    })(rcbTheme),
    backgroundColor: themed({
      light: "#fafafa",
      dark: "#282c34"
    })(rcbTheme),
    textColor: themed({
      light: "#383a42",
      dark: "#abb2bf"
    })(rcbTheme),
    substringColor: themed({
      light: "#e45649",
      dark: "#e06c75"
    })(rcbTheme),
    keywordColor: themed({
      light: "#a626a4",
      dark: "#c678dd"
    })(rcbTheme),
    attributeColor: themed({
      light: "#50a14f",
      dark: "#98c379"
    })(rcbTheme),
    selectorAttributeColor: themed({
      light: "#e45649",
      dark: "#e06c75"
    })(rcbTheme),
    docTagColor: themed({
      light: "#a626a4",
      dark: "#c678dd"
    })(rcbTheme),
    nameColor: themed({
      light: "#e45649",
      dark: "#e06c75"
    })(rcbTheme),
    builtInColor: themed({
      light: "#c18401",
      dark: "#e6c07b"
    })(rcbTheme),
    literalColor: themed({
      light: "#0184bb",
      dark: "#56b6c2"
    })(rcbTheme),
    bulletColor: themed({
      light: "#4078f2",
      dark: "#61aeee"
    })(rcbTheme),
    codeColor: themed({
      light: "#383a42",
      dark: "#abb2bf"
    })(rcbTheme),
    additionColor: themed({
      light: "#50a14f",
      dark: "#98c379"
    })(rcbTheme),
    regexpColor: themed({
      light: "#50a14f",
      dark: "#98c379"
    })(rcbTheme),
    symbolColor: themed({
      light: "#4078f2",
      dark: "#61aeee"
    })(rcbTheme),
    variableColor: themed({
      light: "#986801",
      dark: "#d19a66"
    })(rcbTheme),
    templateVariableColor: themed({
      light: "#986801",
      dark: "#d19a66"
    })(rcbTheme),
    linkColor: themed({
      light: "#4078f2",
      dark: "#61aeee"
    })(rcbTheme),
    selectorClassColor: themed({
      light: "#986801",
      dark: "#d19a66"
    })(rcbTheme),
    typeColor: themed({
      light: "#986801",
      dark: "#d19a66"
    })(rcbTheme),
    stringColor: themed({
      light: "#50a14f",
      dark: "#98c379"
    })(rcbTheme),
    selectorIdColor: themed({
      light: "#4078f2",
      dark: "#61aeee"
    })(rcbTheme),
    quoteColor: themed({
      light: "#a0a1a7",
      dark: "#5c6370"
    })(rcbTheme),
    templateTagColor: themed({
      light: "#383a42",
      dark: "#abb2bf"
    })(rcbTheme),
    deletionColor: themed({
      light: "#e45649",
      dark: "#e06c75"
    })(rcbTheme),
    titleColor: themed({
      light: "#4078f2",
      dark: "#61aeee"
    })(rcbTheme),
    sectionColor: themed({
      light: "#e45649",
      dark: "#e06c75"
    })(rcbTheme),
    commentColor: themed({
      light: "#a0a1a7",
      dark: "#5c6370"
    })(rcbTheme),
    metaKeywordColor: themed({
      light: "#383a42",
      dark: "#abb2bf"
    })(rcbTheme),
    metaColor: themed({
      light: "#4078f2",
      dark: "#61aeee"
    })(rcbTheme),
    functionColor: themed({
      light: "#383a42",
      dark: "#abb2bf"
    })(rcbTheme),
    numberColor: themed({
      light: "#986801",
      dark: "#d19a66"
    })(rcbTheme)
  };
};

var codeFontFamily = "inherit";
var fontSize = "inherit";
var codeContainerStyle = {
  fontSize: fontSize,
  fontFamily: codeFontFamily,
  lineHeight: 20 / 12,
  padding: 8
};

var lineNumberContainerStyle = function lineNumberContainerStyle(theme) {
  return {
    fontSize: fontSize,
    lineHeight: 20 / 14,
    color: theme.lineNumberColor,
    backgroundColor: theme.lineNumberBgColor,
    flexShrink: 0,
    padding: 8,
    textAlign: "right",
    userSelect: "none"
  };
};

var sharedCodeStyle = function sharedCodeStyle(theme) {
  return {
    key: {
      color: theme.keywordColor,
      fontWeight: "bolder"
    },
    keyword: {
      color: theme.keywordColor,
      fontWeight: "bolder"
    },
    'attr-name': {
      color: theme.attributeColor
    },
    selector: {
      color: theme.selectorTagColor
    },
    comment: {
      color: theme.commentColor,
      fontFamily: codeFontFamily,
      fontStyle: "italic"
    },
    'block-comment': {
      color: theme.commentColor,
      fontFamily: codeFontFamily,
      fontStyle: "italic"
    },
    'function-name': {
      color: theme.sectionColor
    },
    'class-name': {
      color: theme.sectionColor
    },
    doctype: {
      color: theme.docTagColor
    },
    substr: {
      color: theme.substringColor
    },
    namespace: {
      color: theme.nameColor
    },
    builtin: {
      color: theme.builtInColor
    },
    entity: {
      color: theme.literalColor
    },
    bullet: {
      color: theme.bulletColor
    },
    code: {
      color: theme.codeColor
    },
    addition: {
      color: theme.additionColor
    },
    regex: {
      color: theme.regexpColor
    },
    symbol: {
      color: theme.symbolColor
    },
    variable: {
      color: theme.variableColor
    },
    url: {
      color: theme.linkColor
    },
    'selector-attr': {
      color: theme.selectorAttributeColor
    },
    'selector-pseudo': {
      color: theme.selectorPseudoColor
    },
    type: {
      color: theme.typeColor
    },
    string: {
      color: theme.stringColor
    },
    quote: {
      color: theme.quoteColor
    },
    tag: {
      color: theme.templateTagColor
    },
    deletion: {
      color: theme.deletionColor
    },
    title: {
      color: theme.titleColor
    },
    section: {
      color: theme.sectionColor
    },
    'meta-keyword': {
      color: theme.metaKeywordColor
    },
    meta: {
      color: theme.metaColor
    },
    italic: {
      fontStyle: "italic"
    },
    bold: {
      fontWeight: "bolder"
    },
    "function": {
      color: theme.functionColor
    },
    number: {
      color: theme.numberColor
    }
  };
};

var codeStyle = function codeStyle(theme) {
  return {
    fontSize: fontSize,
    fontFamily: codeFontFamily,
    background: theme.backgroundColor,
    color: theme.textColor,
    borderRadius: 3,
    display: "flex",
    lineHeight: 20 / 14,
    overflowX: "auto",
    whiteSpace: "pre"
  };
};

var codeBlockStyle = function codeBlockStyle(theme) {
  return _extends({
    'pre[class*="language-"]': codeStyle(theme)
  }, sharedCodeStyle(theme));
};

var inlineCodeStyle = function inlineCodeStyle(theme) {
  return _extends({
    'pre[class*="language-"]': _extends({}, codeStyle(theme), {
      padding: '2px 4px',
      display: 'inline',
      whiteSpace: 'pre-wrap'
    })
  }, sharedCodeStyle(theme));
};

function applyTheme(theme) {
  if (theme === void 0) {
    theme = {
      mode: 'light'
    };
  }

  var newTheme = _extends({}, defaultColors(theme), theme);

  return {
    lineNumberContainerStyle: lineNumberContainerStyle(newTheme),
    codeBlockStyle: codeBlockStyle(newTheme),
    inlineCodeStyle: inlineCodeStyle(newTheme),
    codeContainerStyle: codeContainerStyle
  };
}

var SUPPORTED_LANGUAGE_ALIASES = /*#__PURE__*/Object.freeze([{
  name: 'PHP',
  alias: ['php', 'php3', 'php4', 'php5'],
  value: 'php'
}, {
  name: 'Java',
  alias: ['java'],
  value: 'java'
}, {
  name: 'CSharp',
  alias: ['csharp', 'c#'],
  value: 'cs'
}, {
  name: 'Python',
  alias: ['python', 'py'],
  value: 'python'
}, {
  name: 'JavaScript',
  alias: ['javascript', 'js'],
  value: 'javascript'
}, {
  name: 'XML',
  alias: ['xml'],
  value: 'xml'
}, {
  name: 'HTML',
  alias: ['html', 'htm'],
  value: 'markup'
}, {
  name: 'C++',
  alias: ['c++', 'cpp', 'clike'],
  value: 'cpp'
}, {
  name: 'Ruby',
  alias: ['ruby', 'rb', 'duby'],
  value: 'ruby'
}, {
  name: 'Objective-C',
  alias: ['objective-c', 'objectivec', 'obj-c', 'objc'],
  value: 'objectivec'
}, {
  name: 'C',
  alias: ['c'],
  value: 'cpp'
}, {
  name: 'Swift',
  alias: ['swift'],
  value: 'swift'
}, {
  name: 'TeX',
  alias: ['tex', 'latex'],
  value: 'tex'
}, {
  name: 'Shell',
  alias: ['shell', 'sh', 'ksh', 'zsh'],
  value: 'bash'
}, {
  name: 'Scala',
  alias: ['scala'],
  value: 'scala'
}, {
  name: 'Go',
  alias: ['go'],
  value: 'go'
}, {
  name: 'ActionScript',
  alias: ['actionscript', 'actionscript3', 'as'],
  value: 'actionscript'
}, {
  name: 'ColdFusion',
  alias: ['coldfusion'],
  value: 'xml'
}, {
  name: 'JavaFX',
  alias: ['javafx', 'jfx'],
  value: 'java'
}, {
  name: 'VbNet',
  alias: ['vbnet', 'vb.net'],
  value: 'vbnet'
}, {
  name: 'JSON',
  alias: ['json'],
  value: 'json'
}, {
  name: 'MATLAB',
  alias: ['matlab'],
  value: 'matlab'
}, {
  name: 'Groovy',
  alias: ['groovy'],
  value: 'groovy'
}, {
  name: 'SQL',
  alias: ['sql', 'postgresql', 'postgres', 'plpgsql', 'psql', 'postgresql-console', 'postgres-console', 'tsql', 't-sql', 'mysql', 'sqlite'],
  value: 'sql'
}, {
  name: 'R',
  alias: ['r'],
  value: 'r'
}, {
  name: 'Perl',
  alias: ['perl', 'pl'],
  value: 'perl'
}, {
  name: 'Lua',
  alias: ['lua'],
  value: 'lua'
}, {
  name: 'Delphi',
  alias: ['delphi', 'pas', 'pascal', 'objectpascal'],
  value: 'delphi'
}, {
  name: 'XML',
  alias: ['xml'],
  value: 'xml'
}, {
  name: 'TypeScript',
  alias: ['typescript', 'ts', 'tsx'],
  value: 'typescript'
}, {
  name: 'CoffeeScript',
  alias: ['coffeescript', 'coffee-script', 'coffee'],
  value: 'coffeescript'
}, {
  name: 'Haskell',
  alias: ['haskell', 'hs'],
  value: 'haskell'
}, {
  name: 'Puppet',
  alias: ['puppet'],
  value: 'puppet'
}, {
  name: 'Arduino',
  alias: ['arduino'],
  value: 'arduino'
}, {
  name: 'Fortran',
  alias: ['fortran'],
  value: 'fortran'
}, {
  name: 'Erlang',
  alias: ['erlang', 'erl'],
  value: 'erlang'
}, {
  name: 'PowerShell',
  alias: ['powershell', 'posh', 'ps1', 'psm1'],
  value: 'powershell'
}, {
  name: 'Haxe',
  alias: ['haxe', 'hx', 'hxsl'],
  value: 'haxe'
}, {
  name: 'Elixir',
  alias: ['elixir', 'ex', 'exs'],
  value: 'elixir'
}, {
  name: 'Verilog',
  alias: ['verilog', 'v'],
  value: 'verilog'
}, {
  name: 'Rust',
  alias: ['rust'],
  value: 'rust'
}, {
  name: 'VHDL',
  alias: ['vhdl'],
  value: 'vhdl'
}, {
  name: 'Sass',
  alias: ['sass'],
  value: 'less'
}, {
  name: 'OCaml',
  alias: ['ocaml'],
  value: 'ocaml'
}, {
  name: 'Dart',
  alias: ['dart'],
  value: 'dart'
}, {
  name: 'CSS',
  alias: ['css'],
  value: 'css'
}, {
  name: 'reStructuredText',
  alias: ['restructuredtext', 'rst', 'rest'],
  value: 'rest'
}, {
  name: 'ObjectPascal',
  alias: ['objectpascal'],
  value: 'delphi'
}, {
  name: 'Kotlin',
  alias: ['kotlin'],
  value: 'kotlin'
}, {
  name: 'D',
  alias: ['d'],
  value: 'd'
}, {
  name: 'Octave',
  alias: ['octave'],
  value: 'matlab'
}, {
  name: 'QML',
  alias: ['qbs', 'qml'],
  value: 'qml'
}, {
  name: 'Prolog',
  alias: ['prolog'],
  value: 'prolog'
}, {
  name: 'FoxPro',
  alias: ['foxpro', 'vfp', 'clipper', 'xbase'],
  value: 'vbnet'
}, {
  name: 'Scheme',
  alias: ['scheme', 'scm'],
  value: 'scheme'
}, {
  name: 'CUDA',
  alias: ['cuda', 'cu'],
  value: 'cpp'
}, {
  name: 'Julia',
  alias: ['julia', 'jl'],
  value: 'julia'
}, {
  name: 'Racket',
  alias: ['racket', 'rkt'],
  value: 'lisp'
}, {
  name: 'Ada',
  alias: ['ada', 'ada95', 'ada2005'],
  value: 'ada'
}, {
  name: 'Tcl',
  alias: ['tcl'],
  value: 'tcl'
}, {
  name: 'Mathematica',
  alias: ['mathematica', 'mma', 'nb'],
  value: 'mathematica'
}, {
  name: 'Autoit',
  alias: ['autoit'],
  value: 'autoit'
}, {
  name: 'StandardML',
  alias: ['standardmL', 'sml', 'standardml'],
  value: 'sml'
}, {
  name: 'Objective-J',
  alias: ['objective-j', 'objectivej', 'obj-j', 'objj'],
  value: 'objectivec'
}, {
  name: 'Smalltalk',
  alias: ['smalltalk', 'squeak', 'st'],
  value: 'smalltalk'
}, {
  name: 'Vala',
  alias: ['vala', 'vapi'],
  value: 'vala'
}, {
  name: 'ABAP',
  alias: ['abap'],
  value: 'sql'
}, {
  name: 'LiveScript',
  alias: ['livescript', 'live-script'],
  value: 'livescript'
}, {
  name: 'XQuery',
  alias: ['xquery', 'xqy', 'xq', 'xql', 'xqm'],
  value: 'xquery'
}, {
  name: 'PlainText',
  alias: ['text', 'plaintext'],
  value: 'text'
}, {
  name: 'Yaml',
  alias: ['yaml', 'yml'],
  value: 'yaml'
}, {
  name: 'GraphQL',
  alias: ['graphql', 'gql'],
  value: 'graphql'
}]);
var normalizeLanguage = function normalizeLanguage(language) {
  if (!language) {
    return '';
  }

  var match = SUPPORTED_LANGUAGE_ALIASES.find(function (val) {
    return val.name === language || val.alias.includes(language);
  }); // Fallback to plain monospaced text if language passed but not supported

  return match ? match.value : language || 'text';
};

var Code = /*#__PURE__*/function (_PureComponent) {
  _inheritsLoose(Code, _PureComponent);

  function Code() {
    var _this;

    _this = _PureComponent.apply(this, arguments) || this;
    _this._isMounted = false;
    return _this;
  }

  var _proto = Code.prototype;

  _proto.componentDidMount = function componentDidMount() {
    this._isMounted = true;
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    this._isMounted = false;
  };

  _proto.isHighlighted = function isHighlighted(lineNumber) {
    if (!this.props.highlight) {
      return true;
    }

    var highlight = this.props.highlight.split(',').map(function (num) {
      if (num.indexOf('-') > 0) {
        // We found a line group, e.g. 1-3
        var _num$split$map$sort = num.split('-').map(Number).sort(),
            from = _num$split$map$sort[0],
            to = _num$split$map$sort[1];

        return Array(to + 1).fill(undefined).map(function (_, index) {
          return index;
        }).slice(from, to + 1);
      }

      return Number(num);
    }).reduce(function (acc, val) {
      return acc.concat(val);
    }, []);

    if (highlight.length === 0) {
      return true;
    }

    if (highlight.includes(lineNumber)) {
      return true;
    }

    return false;
  };

  _proto.render = function render() {
    var _this2 = this;

    var _applyTheme = applyTheme(this.props.theme),
        inlineCodeStyle = _applyTheme.inlineCodeStyle;

    var language = normalizeLanguage(this.props.language);
    var props = {
      language: language,
      PreTag: this.props.preTag,
      style: this.props.codeStyle || inlineCodeStyle,
      showLineNumbers: this.props.showLineNumbers,
      startingLineNumber: this.props.startingLineNumber,
      codeTagProps: this.props.codeTagProps,
      wrapLongLines: this.props.wrapLongLines
    };
    return React.createElement(PrismAsyncLight, Object.assign({}, props, {
      // Wrap lines is needed to set styles on the line.
      // We use this to set opacity if highlight specific lines.
      wrapLines: this.props.highlight.length > 0 || !!this.props.lineProps,
      customStyle: this.props.customStyle,
      // Types are incorrect.
      lineProps: function lineProps(lineNumber) {
        var isHighlighted = _this2.isHighlighted(lineNumber); // console.log(isHighlighted, lineNumber);


        return _this2.props.lineProps ? _this2.props.lineProps(lineNumber, isHighlighted) : {
          style: _extends({
            opacity: isHighlighted ? 1 : 0.3
          }, _this2.props.lineNumberContainerStyle)
        };
      }
    }), this.props.text);
  };

  return Code;
}(PureComponent);
Code.defaultProps = {
  theme: {},
  showLineNumbers: false,
  wrapLongLines: false,
  startingLineNumber: 1,
  lineNumberContainerStyle: {},
  codeTagProps: {},
  preTag: 'span',
  highlight: '',
  customStyle: {}
};

var CodeWithTheme = /*#__PURE__*/withTheme(Code);
function ThemedCode (props) {
  return React.createElement(CodeWithTheme, Object.assign({}, props));
}

var LANGUAGE_FALLBACK = 'text';

var CodeBlock = /*#__PURE__*/function (_PureComponent) {
  _inheritsLoose(CodeBlock, _PureComponent);

  function CodeBlock() {
    var _this;

    _this = _PureComponent.apply(this, arguments) || this;
    _this._isMounted = false;

    _this.handleCopy = function (event) {
      /**
       * We don't want to copy the markup after highlighting, but rather the preformatted text in the selection
       */
      var data = event.nativeEvent.clipboardData;

      if (data) {
        event.preventDefault();
        var selection = window.getSelection();

        if (selection === null) {
          return;
        }

        var selectedText = selection.toString();
        var document = "<!doctype html><html><head></head><body><pre>" + selectedText + "</pre></body></html>";
        data.clearData();
        data.setData('text/html', document);
        data.setData('text/plain', selectedText);
      }
    };

    return _this;
  }

  var _proto = CodeBlock.prototype;

  _proto.componentDidMount = function componentDidMount() {
    this._isMounted = true;
  };

  _proto.componentWillUnmount = function componentWillUnmount() {
    this._isMounted = false;
  };

  _proto.render = function render() {
    var _this$props, _this$props2, _this$props3, _this$props4;

    var _applyTheme = applyTheme(this.props.theme),
        lineNumberContainerStyle = _applyTheme.lineNumberContainerStyle,
        codeBlockStyle = _applyTheme.codeBlockStyle,
        codeContainerStyle = _applyTheme.codeContainerStyle;

    var props = {
      language: this.props.language || LANGUAGE_FALLBACK,
      codeStyle: _extends({}, codeBlockStyle, (_this$props = this.props) === null || _this$props === void 0 ? void 0 : _this$props.codeBlockStyle),
      customStyle: (_this$props2 = this.props) === null || _this$props2 === void 0 ? void 0 : _this$props2.customStyle,
      showLineNumbers: this.props.showLineNumbers,
      startingLineNumber: this.props.startingLineNumber,
      codeTagProps: {
        style: _extends({}, codeContainerStyle, (_this$props3 = this.props) === null || _this$props3 === void 0 ? void 0 : _this$props3.codeContainerStyle)
      },
      lineNumberContainerStyle: _extends({}, lineNumberContainerStyle, (_this$props4 = this.props) === null || _this$props4 === void 0 ? void 0 : _this$props4.lineNumberContainerStyle),
      text: this.props.text.toString(),
      highlight: this.props.highlight,
      wrapLongLines: this.props.wrapLongLines,
      lineProps: this.props.lineProps
    };
    return React.createElement(Code, Object.assign({}, props));
  };

  return CodeBlock;
}(PureComponent);
CodeBlock.displayName = 'CodeBlock';
CodeBlock.defaultProps = {
  showLineNumbers: true,
  wrapLongLines: false,
  startingLineNumber: 1,
  language: LANGUAGE_FALLBACK,
  theme: {},
  highlight: '',
  lineNumberContainerStyle: {},
  customStyle: {},
  codeBlockStyle: {}
};

var CodeBlockWithTheme = /*#__PURE__*/withTheme(CodeBlock);
function ThemedCodeBlock (props) {
  return React.createElement(CodeBlockWithTheme, Object.assign({}, props));
}

var ClipboardListIcon = function ClipboardListIcon(_ref) {
  var size = _ref.size,
      color = _ref.color,
      props = _objectWithoutPropertiesLoose(_ref, ["size", "color"]);

  return (// <svg {...props} viewBox="0 0 384 512" width={size} height={size} fill={color}>
    //   <path d="M280 240H168c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8zm0 96H168c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8zM112 232c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24 24-10.7 24-24-10.7-24-24-24zM336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 48c8.8 0 16 7.2 16 16s-7.2 16-16 16-16-7.2-16-16 7.2-16 16-16zm144 408c0 4.4-3.6 8-8 8H56c-4.4 0-8-3.6-8-8V120c0-4.4 3.6-8 8-8h40v32c0 8.8 7.2 16 16 16h160c8.8 0 16-7.2 16-16v-32h40c4.4 0 8 3.6 8 8v336z" />
    // </svg>
    React.createElement("svg", Object.assign({
      width: size,
      height: size,
      viewBox: "0 0 24 24"
    }, props, {
      fill: "none",
      xmlns: "http://www.w3.org/2000/svg"
    }), React.createElement("path", {
      d: "M20 9H11C9.89543 9 9 9.89543 9 11V20C9 21.1046 9.89543 22 11 22H20C21.1046 22 22 21.1046 22 20V11C22 9.89543 21.1046 9 20 9Z",
      stroke: color,
      strokeWidth: "2",
      strokeLinecap: "round",
      strokeLinejoin: "round"
    }), React.createElement("path", {
      d: "M5 15H4C3.46957 15 2.96086 14.7893 2.58579 14.4142C2.21071 14.0391 2 13.5304 2 13V4C2 3.46957 2.21071 2.96086 2.58579 2.58579C2.96086 2.21071 3.46957 2 4 2H13C13.5304 2 14.0391 2.21071 14.4142 2.58579C14.7893 2.96086 15 3.46957 15 4V5",
      stroke: color,
      strokeWidth: "2",
      strokeLinecap: "round",
      strokeLinejoin: "round"
    }))
  );
};

ClipboardListIcon.displayName = "ClipboardListIcon";
ClipboardListIcon.defaultProps = {
  size: '16pt',
  color: "currentcolor"
};

var ClipboardCheckIcon = function ClipboardCheckIcon(_ref2) {
  var size = _ref2.size,
      color = _ref2.color,
      props = _objectWithoutPropertiesLoose(_ref2, ["size", "color"]);

  return React.createElement("svg", Object.assign({}, props, {
    viewBox: "0 0 384 512",
    width: size,
    height: size,
    fill: color
  }), React.createElement("path", {
    d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm121.2 231.8l-143 141.8c-4.7 4.7-12.3 4.6-17-.1l-82.6-83.3c-4.7-4.7-4.6-12.3.1-17L99.1 285c4.7-4.7 12.3-4.6 17 .1l46 46.4 106-105.2c4.7-4.7 12.3-4.6 17 .1l28.2 28.4c4.7 4.8 4.6 12.3-.1 17z"
  }));
};

ClipboardCheckIcon.displayName = "ClipboardCheckIcon";
ClipboardCheckIcon.defaultProps = {
  size: '16pt',
  color: "currentcolor"
};
function Copy (_ref3) {
  var size = _ref3.size,
      color = _ref3.color,
      copied = _ref3.copied,
      props = _objectWithoutPropertiesLoose(_ref3, ["size", "color", "copied"]);

  if (copied) {
    return React.createElement(ClipboardCheckIcon, Object.assign({}, {
      color: color,
      size: size
    }, props));
  }

  return React.createElement(ClipboardListIcon, Object.assign({}, {
    color: color,
    size: size
  }, props));
}

var isBrowser = function isBrowser() {
  return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
};

var useSSR = function useSSR() {
  var _useState = useState(false),
      browser = _useState[0],
      setBrowser = _useState[1];

  useEffect(function () {
    setBrowser(isBrowser());
  }, []);
  return {
    isBrowser: browser,
    isServer: !browser
  };
};

var getId = function getId() {
  return Math.random().toString(32).slice(2, 10);
};

var createElement = function createElement(id) {
  var el = document.createElement('div');
  el.setAttribute('id', id);
  return el;
};

var usePortal = function usePortal(selectId) {
  if (selectId === void 0) {
    selectId = getId();
  }

  var id = "zeit-ui-" + selectId;

  var _useSSR = useSSR(),
      isBrowser = _useSSR.isBrowser;

  var _useState = useState(isBrowser ? createElement(id) : null),
      elSnapshot = _useState[0],
      setElSnapshot = _useState[1];

  useEffect(function () {
    var hasElement = document.querySelector("#" + id);
    var el = hasElement || createElement(id);

    if (!hasElement) {
      document.body.appendChild(el);
    }

    setElSnapshot(el);
  }, []);
  return elSnapshot;
};

var warningStack = {};

var useWarning = function useWarning(message, component) {
  var tag = component ? " [" + component + "]" : ' ';
  var log = "[Zeit UI]" + tag + ": " + message;
  if (typeof console === 'undefined') return;
  if (warningStack[log]) return;
  warningStack[log] = true;

  if (process.env.NODE_ENV !== 'production') {
    return console.error(log);
  }

  console.warn(log);
};

var defaultOptions = {
  onError: function onError() {
    return useWarning('Failed to copy.', 'use-clipboard');
  }
};

var useClipboard = function useClipboard(options) {
  if (options === void 0) {
    options = defaultOptions;
  }

  var el = usePortal('clipboard');

  var copyText = function copyText(el, text) {
    if (!el || !text) return;
    var selection = window.getSelection();
    if (!selection) return;
    el.style.whiteSpace = 'pre';
    el.textContent = text;
    var range = window.document.createRange();
    selection.removeAllRanges();
    range.selectNode(el);
    selection.addRange(range);

    try {
      window.document.execCommand('copy');
    } catch (e) {
      options.onError && options.onError();
    }

    selection.removeAllRanges();

    if (el) {
      el.textContent = '';
    }
  };

  var copy = useCallback(function (text) {
    copyText(el, text);
  }, [el]);
  return {
    copy: copy
  };
};

function _templateObject2() {
  var data = _taggedTemplateLiteralLoose(["\n  position: relative;\n  background: ", ";\n  border-radius: 0.25rem;\n  padding: ", ";\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0.5em;\n  right: 0.75em;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  background: ", ";\n  margin-top: 0.15rem;\n  border-radius: 0.25rem;\n  max-height: 2rem;\n  max-width: 2rem;\n  padding: 0.25rem;\n  &:hover {\n    opacity: ", ";\n  }\n  &:focus {\n    outline: none;\n    opacity: 1;\n  }\n  .icon {\n    width: 1rem;\n    height: 1rem;\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
var Button = /*#__PURE__*/styled.button( /*#__PURE__*/_templateObject(), function (p) {
  return p.theme.backgroundColor;
}, function (p) {
  return p.copied ? 1 : 0.5;
});
var Snippet = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject2(), function (p) {
  return p.theme.backgroundColor;
}, function (p) {
  return p.codeBlock ? "0.25rem 0.5rem 0.25rem 0.25rem" : "0.25rem";
});
function CopyBlock(_ref) {
  var theme = _ref.theme,
      text = _ref.text,
      _ref$codeBlock = _ref.codeBlock,
      codeBlock = _ref$codeBlock === void 0 ? false : _ref$codeBlock,
      _ref$customStyle = _ref.customStyle,
      customStyle = _ref$customStyle === void 0 ? {} : _ref$customStyle,
      onCopy = _ref.onCopy,
      rest = _objectWithoutPropertiesLoose(_ref, ["theme", "text", "codeBlock", "customStyle", "onCopy"]);

  var _useState = useState(false),
      copied = _useState[0],
      toggleCopy = _useState[1];

  var _useClipboard = useClipboard(),
      copy = _useClipboard.copy;

  var handler = function handler() {
    copy(text);
    onCopy ? onCopy() : toggleCopy(!copied);
  };

  return React.createElement(Snippet, Object.assign({}, {
    codeBlock: codeBlock
  }, {
    style: customStyle,
    theme: theme
  }), codeBlock ? // @ts-ignore
  React.createElement(CodeBlock, Object.assign({
    text: text,
    theme: theme
  }, rest)) : // @ts-ignore
  React.createElement(Code, Object.assign({
    text: text,
    theme: theme
  }, rest)), React.createElement(Button, Object.assign({
    type: "button",
    onClick: handler
  }, {
    theme: theme,
    copied: copied
  }), React.createElement(Copy, {
    color: copied ? theme.stringColor : theme.textColor,
    copied: copied,
    className: "icon",
    size: "16pt"
  })));
}

var CopyBlockWithTheme = /*#__PURE__*/withTheme(CopyBlock);
function ThemedCopyBlock (props) {
  return React.createElement(CopyBlockWithTheme, Object.assign({}, props));
}

var withDefaults = function withDefaults(component, defaultProps) {
  component.defaultProps = defaultProps;
  return component;
};

var getStyles = function getStyles(theme) {
  var styles = {
    color: theme.textColor,
    border: theme.lineNumberBgColor,
    bgColor: theme.backgroundColor
  };
  return styles;
};

var SnippetIcon = function SnippetIcon() {
  return React.createElement("svg", {
    viewBox: "0 0 24 24",
    width: "22",
    height: "22",
    stroke: "currentColor",
    strokeWidth: "1.5",
    strokeLinecap: "round",
    strokeLinejoin: "round",
    fill: "none",
    shapeRendering: "geometricPrecision",
    style: {
      color: 'currentcolor'
    }
  }, React.createElement("path", {
    d: "M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z"
  }));
};

var SnippetIcon$1 = /*#__PURE__*/React.memo(SnippetIcon);

function _templateObject$1() {
  var data = _taggedTemplateLiteralLoose(["\n   {\n    position: relative;\n    width: ", ";\n    max-width: 100%;\n    padding: 8pt;\n    padding-right: calc(2 * 16pt);\n    color: ", ";\n    background-color: ", ";\n    border: 1px solid ", ";\n    border-radius: 5px;\n  }\n  pre {\n    margin: 0;\n    padding: 0;\n    border: none;\n    background-color: transparent;\n    color: ", ";\n    font-size: 0.8125rem;\n  }\n  pre::before {\n    content: '$ ';\n    user-select: none;\n  }\n  pre :global(*) {\n    margin: 0;\n    padding: 0;\n    font-size: inherit;\n    color: inherit;\n  }\n  .copy {\n    position: absolute;\n    right: 0;\n    top: -2px;\n    transform: translateY(50%);\n    background-color: ", ";\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    width: calc(2 * 16pt);\n    color: inherit;\n    transition: opacity 0.2s ease 0s;\n    border-radius: 5px;\n    cursor: pointer;\n    user-select: none;\n  }\n  .copy:hover {\n    opacity: 0.7;\n  }\n"]);

  _templateObject$1 = function _templateObject() {
    return data;
  };

  return data;
}
var SnippetWrapper = /*#__PURE__*/styled.div( /*#__PURE__*/_templateObject$1(), function (_ref) {
  var width = _ref.width;
  return width;
}, function (_ref2) {
  var style = _ref2.style;
  return style.color;
}, function (_ref3) {
  var style = _ref3.style;
  return style.bgColor;
}, function (_ref4) {
  var style = _ref4.style;
  return style.border;
}, function (_ref5) {
  var style = _ref5.style;
  return style.color;
}, function (_ref6) {
  var style = _ref6.style;
  return style.bgColor;
});
var defaultProps = {
  width: 'initial',
  copy: 'default',
  className: ''
};

var textArrayToString = function textArrayToString(text) {
  return text.reduce(function (pre, current) {
    if (!current) return pre;
    return pre ? pre + "\n" + current : current;
  }, '');
};

var Snippet$1 = function Snippet(_ref7) {
  var children = _ref7.children,
      text = _ref7.text,
      copyType = _ref7.copy,
      className = _ref7.className,
      props = _objectWithoutPropertiesLoose(_ref7, ["children", "text", "width", "copy", "className"]);

  var _useClipboard = useClipboard(),
      copy = _useClipboard.copy;

  var ref = useRef(null);
  var isMultiLine = text && Array.isArray(text);
  var theme = useContext(ThemeContext);
  var style = useMemo(function () {
    return getStyles(theme);
  }, [theme]);
  var showCopyIcon = useMemo(function () {
    return copyType !== 'prevent';
  }, [copyType]);
  var childText = useMemo(function () {
    if (isMultiLine) return textArrayToString(text);
    if (!children) return text;
    if (!ref.current) return '';
    return ref.current.textContent;
  }, [ref.current, children, text]);

  var clickHandler = function clickHandler() {
    if (!childText || !showCopyIcon) return;
    copy(childText);
    if (copyType === 'slient') return;
  };

  return React.createElement(SnippetWrapper, Object.assign({
    className: "" + className
  }, props, {
    style: style
  }), isMultiLine ? text.map(function (t, index) {
    return React.createElement("pre", {
      key: "snippet-" + index + "-" + t
    }, t);
  }) : React.createElement("pre", {
    ref: ref
  }, children || text), showCopyIcon && React.createElement("div", {
    className: "copy",
    onClick: clickHandler
  }, React.createElement(SnippetIcon$1, null)));
};

var MemoSnippet = /*#__PURE__*/React.memo(Snippet$1);
var Snippet$2 = /*#__PURE__*/withDefaults(MemoSnippet, defaultProps);

var SnippetWithTheme = /*#__PURE__*/withTheme(Snippet$2);
function ThemedSnippet (props) {
  return React.createElement(SnippetWithTheme, Object.assign({}, props));
}

var a11yDark = {
  lineNumberColor: "#f8f8f2",
  lineNumberBgColor: "#2b2b2b",
  backgroundColor: "#2b2b2b",
  textColor: "#f8f8f2",
  substringColor: "#f8f8f2",
  keywordColor: "#dcc6e0",
  attributeColor: "#ffd700",
  selectorAttributeColor: "#dcc6e0",
  docTagColor: "#f8f8f2",
  nameColor: "#ffa07a",
  builtInColor: "#f5ab35",
  literalColor: "#f5ab35",
  bulletColor: "#abe338",
  codeColor: "#f8f8f2",
  additionColor: "#abe338",
  regexpColor: "#ffa07a",
  symbolColor: "#abe338",
  variableColor: "#ffa07a",
  templateVariableColor: "#ffa07a",
  linkColor: "#f5ab35",
  selectorClassColor: "#ffa07a",
  typeColor: "#f5ab35",
  stringColor: "#abe338",
  selectorIdColor: "#ffa07a",
  quoteColor: "#d4d0ab",
  templateTagColor: "#f8f8f2",
  deletionColor: "#ffa07a",
  titleColor: "#00e0e0",
  sectionColor: "#00e0e0",
  commentColor: "#d4d0ab",
  metaKeywordColor: "#f8f8f2",
  metaColor: "#f5ab35",
  functionColor: "#f8f8f2",
  numberColor: "#f5ab35"
};

var a11yLight = {
  lineNumberColor: "#545454",
  lineNumberBgColor: "#fefefe",
  backgroundColor: "#fefefe",
  textColor: "#545454",
  substringColor: "#545454",
  keywordColor: "#7928a1",
  attributeColor: "#aa5d00",
  selectorAttributeColor: "#7928a1",
  docTagColor: "#545454",
  nameColor: "#d91e18",
  builtInColor: "#aa5d00",
  literalColor: "#aa5d00",
  bulletColor: "#008000",
  codeColor: "#545454",
  additionColor: "#008000",
  regexpColor: "#d91e18",
  symbolColor: "#008000",
  variableColor: "#d91e18",
  templateVariableColor: "#d91e18",
  linkColor: "#aa5d00",
  selectorClassColor: "#d91e18",
  typeColor: "#aa5d00",
  stringColor: "#008000",
  selectorIdColor: "#d91e18",
  quoteColor: "#696969",
  templateTagColor: "#545454",
  deletionColor: "#d91e18",
  titleColor: "#007faa",
  sectionColor: "#007faa",
  commentColor: "#696969",
  metaKeywordColor: "#545454",
  metaColor: "#aa5d00",
  functionColor: "#545454",
  numberColor: "#aa5d00"
};

var anOldHope = {
  lineNumberColor: "#c0c5ce",
  lineNumberBgColor: "#1C1D21",
  backgroundColor: "#1C1D21",
  textColor: "#c0c5ce",
  substringColor: "#c0c5ce",
  keywordColor: "#B45EA4",
  attributeColor: "#EE7C2B",
  selectorAttributeColor: "#B45EA4",
  docTagColor: "#c0c5ce",
  nameColor: "#EB3C54",
  builtInColor: "#E7CE56",
  literalColor: "#E7CE56",
  bulletColor: "#4FB4D7",
  codeColor: "#c0c5ce",
  additionColor: "#4FB4D7",
  regexpColor: "#EB3C54",
  symbolColor: "#4FB4D7",
  variableColor: "#EB3C54",
  templateVariableColor: "#EB3C54",
  linkColor: "#E7CE56",
  selectorClassColor: "#EB3C54",
  typeColor: "#E7CE56",
  stringColor: "#4FB4D7",
  selectorIdColor: "#EB3C54",
  quoteColor: "#B6B18B",
  templateTagColor: "#c0c5ce",
  deletionColor: "#EB3C54",
  titleColor: "#78BB65",
  sectionColor: "#78BB65",
  commentColor: "#B6B18B",
  metaKeywordColor: "#c0c5ce",
  metaColor: "#E7CE56",
  functionColor: "#c0c5ce",
  numberColor: "#E7CE56"
};

var androidstudio = {
  lineNumberColor: "#a9b7c6",
  lineNumberBgColor: "#282b2e",
  backgroundColor: "#282b2e",
  textColor: "#a9b7c6",
  substringColor: "#a9b7c6",
  keywordColor: "#cc7832",
  attributeColor: "#6A8759",
  selectorAttributeColor: "#cc7832",
  docTagColor: "#a9b7c6",
  nameColor: "#e8bf6a",
  builtInColor: "#a9b7c6",
  literalColor: "#6897BB",
  bulletColor: "#6897BB",
  codeColor: "#a9b7c6",
  additionColor: "#6A8759",
  regexpColor: "#a9b7c6",
  symbolColor: "#6897BB",
  variableColor: "#629755",
  templateVariableColor: "#629755",
  linkColor: "#629755",
  selectorClassColor: "#e8bf6a",
  typeColor: "#ffc66d",
  stringColor: "#6A8759",
  selectorIdColor: "#e8bf6a",
  quoteColor: "#808080",
  templateTagColor: "#a9b7c6",
  deletionColor: "#cc7832",
  titleColor: "#ffc66d",
  sectionColor: "#ffc66d",
  commentColor: "#808080",
  metaKeywordColor: "#a9b7c6",
  metaColor: "#bbb529",
  functionColor: "#a9b7c6",
  numberColor: "#6897BB"
};

var arta = {
  lineNumberColor: "#aaa",
  lineNumberBgColor: "#222",
  backgroundColor: "#222",
  textColor: "#aaa",
  substringColor: "#aaa",
  keywordColor: "#6644aa",
  attributeColor: "#32aaee",
  selectorAttributeColor: "#6644aa",
  docTagColor: undefined,
  nameColor: "#6644aa",
  builtInColor: "#32aaee",
  literalColor: "#32aaee",
  bulletColor: "#ffcc33",
  codeColor: "#aaa",
  additionColor: "#00cc66",
  regexpColor: "#ffcc33",
  symbolColor: "#ffcc33",
  variableColor: "#bb1166",
  templateVariableColor: "#32aaee",
  linkColor: "#32aaee",
  selectorClassColor: "#6644aa",
  typeColor: "#32aaee",
  stringColor: "#ffcc33",
  selectorIdColor: "#6644aa",
  quoteColor: "#444",
  templateTagColor: "#bb1166",
  deletionColor: "#bb1166",
  titleColor: "#bb1166",
  sectionColor: "#fff",
  commentColor: "#444",
  metaKeywordColor: "#aaa",
  metaColor: "#444",
  functionColor: "#aaa",
  numberColor: "#00cc66"
};

var atomOneDark = {
  lineNumberColor: "#abb2bf",
  lineNumberBgColor: "#282c34",
  backgroundColor: "#282c34",
  textColor: "#abb2bf",
  substringColor: "#e06c75",
  keywordColor: "#c678dd",
  attributeColor: "#98c379",
  selectorAttributeColor: "#e06c75",
  docTagColor: "#c678dd",
  nameColor: "#e06c75",
  builtInColor: "#e6c07b",
  literalColor: "#56b6c2",
  bulletColor: "#61aeee",
  codeColor: "#abb2bf",
  additionColor: "#98c379",
  regexpColor: "#98c379",
  symbolColor: "#61aeee",
  variableColor: "#d19a66",
  templateVariableColor: "#d19a66",
  linkColor: "#61aeee",
  selectorClassColor: "#d19a66",
  typeColor: "#d19a66",
  stringColor: "#98c379",
  selectorIdColor: "#61aeee",
  quoteColor: "#5c6370",
  templateTagColor: "#abb2bf",
  deletionColor: "#e06c75",
  titleColor: "#61aeee",
  sectionColor: "#e06c75",
  commentColor: "#5c6370",
  metaKeywordColor: "#abb2bf",
  metaColor: "#61aeee",
  functionColor: "#abb2bf",
  numberColor: "#d19a66"
};

var atomOneLight = {
  lineNumberColor: "#383a42",
  lineNumberBgColor: "#fafafa",
  backgroundColor: "#fafafa",
  textColor: "#383a42",
  substringColor: "#e45649",
  keywordColor: "#a626a4",
  attributeColor: "#50a14f",
  selectorAttributeColor: "#e45649",
  docTagColor: "#a626a4",
  nameColor: "#e45649",
  builtInColor: "#c18401",
  literalColor: "#0184bb",
  bulletColor: "#4078f2",
  codeColor: "#383a42",
  additionColor: "#50a14f",
  regexpColor: "#50a14f",
  symbolColor: "#4078f2",
  variableColor: "#986801",
  templateVariableColor: "#986801",
  linkColor: "#4078f2",
  selectorClassColor: "#986801",
  typeColor: "#986801",
  stringColor: "#50a14f",
  selectorIdColor: "#4078f2",
  quoteColor: "#a0a1a7",
  templateTagColor: "#383a42",
  deletionColor: "#e45649",
  titleColor: "#4078f2",
  sectionColor: "#e45649",
  commentColor: "#a0a1a7",
  metaKeywordColor: "#383a42",
  metaColor: "#4078f2",
  functionColor: "#383a42",
  numberColor: "#986801"
};

var codepen = {
  lineNumberColor: "#fff",
  lineNumberBgColor: "#222",
  backgroundColor: "#222",
  textColor: "#fff",
  substringColor: "#fff",
  keywordColor: "#8f9c6c",
  attributeColor: "#9b869b",
  selectorTagColor: "#8f9c6c",
  docTagColor: "#fff",
  nameColor: "#9b869b",
  builtInColor: "#ab875d",
  literalColor: "#ab875d",
  bulletColor: "#ab875d",
  codeColor: "#fff",
  additionColor: "#8f9c6c",
  regexpColor: "#ab875d",
  symbolColor: "#ab875d",
  variableColor: "#ab875d",
  templateVariableColor: "#ab875d",
  linkColor: "#ab875d",
  selectorAttributeColor: "#fff",
  selectorPseudoColor: "#ff",
  typeColor: "#9b869b",
  stringColor: "#8f9c6c",
  selectorIdColor: "#9b869b",
  selectorClassColor: "#9b869b",
  quoteColor: "#777",
  templateTagColor: "#ab875d",
  deletionColor: "#ab875d",
  titleColor: "#9b869b",
  sectionColor: "#9b869b",
  commentColor: "#777",
  metaKeywordColor: "#ab875d",
  metaColor: "#ab875d",
  functionColor: "#fff",
  numberColor: "#ab875d"
};

var dracula = {
  lineNumberColor: "#6272a4",
  lineNumberBgColor: "#282a36",
  backgroundColor: "#282a36",
  textColor: "#f8f8f2",
  substringColor: "#f1fa8c",
  keywordColor: "#ff79c6",
  attributeColor: "#50fa7b",
  selectorTagColor: "#8be9fd",
  docTagColor: "#f1fa8c",
  nameColor: "#66d9ef",
  builtInColor: "#50fa7b",
  literalColor: "#FF79C6",
  bulletColor: "#8BE9FD",
  codeColor: "#50FA7B",
  additionColor: "#f1fa8c",
  regexpColor: "#F1FA8C",
  symbolColor: "#F1FA8C",
  variableColor: "#F8F8F2",
  templateVariableColor: "#FF79C6",
  linkColor: "#00bcd4",
  selectorAttributeColor: "#FF79C6",
  selectorPseudoColor: "#FF79C6",
  typeColor: "#8BE9FD",
  stringColor: "#F1FA8C",
  selectorIdColor: "#50FA7B",
  selectorClassColor: "#50FA7B",
  quoteColor: "#E9F284",
  templateTagColor: "#FF79C6",
  deletionColor: "#FF79C6",
  titleColor: "#ff555580",
  sectionColor: "#F8F8F2",
  commentColor: "#6272A4",
  metaKeywordColor: "#50FA7B",
  metaColor: "#50FA7B",
  functionColor: "#50FA7B",
  numberColor: "#bd93f9"
};

var far = {
  lineNumberColor: "#0ff",
  lineNumberBgColor: "#000080",
  backgroundColor: "#000080",
  textColor: "#0ff",
  substringColor: "#0ff",
  keywordColor: "#fff",
  attributeColor: "#ff0",
  selectorAttributeColor: "#fff",
  docTagColor: "#888",
  nameColor: "#fff",
  builtInColor: "#ff0",
  literalColor: "#0f0",
  bulletColor: "#ff0",
  codeColor: "#0ff",
  additionColor: "#ff0",
  regexpColor: "#0f0",
  symbolColor: "#ff0",
  variableColor: "#fff",
  templateVariableColor: "#ff0",
  linkColor: "#0f0",
  selectorClassColor: "#fff",
  typeColor: "#fff",
  stringColor: "#ff0",
  selectorIdColor: "#fff",
  quoteColor: "#888",
  templateTagColor: "#ff0",
  deletionColor: "#888",
  titleColor: "#0ff",
  sectionColor: "#fff",
  commentColor: "#888",
  metaKeywordColor: "#0ff",
  metaColor: "#008080",
  functionColor: "#0ff",
  numberColor: "#0f0"
};

var github = {
  lineNumberColor: "#333333",
  lineNumberBgColor: "white",
  backgroundColor: "white",
  textColor: "#333333",
  substringColor: "#333333",
  keywordColor: "#a71d5d",
  attributeColor: "#0086b3",
  selectorAttributeColor: "#a71d5d",
  docTagColor: "#333333",
  nameColor: "#63a35c",
  builtInColor: "#333333",
  literalColor: "#0086b3",
  bulletColor: "#0086b3",
  codeColor: "#333333",
  additionColor: "#55a532",
  regexpColor: "#333333",
  symbolColor: "#0086b3",
  variableColor: "#df5000",
  templateVariableColor: "#df5000",
  linkColor: "#0366d6",
  selectorClassColor: "#795da3",
  typeColor: "#a71d5d",
  stringColor: "#df5000",
  selectorIdColor: "#795da3",
  quoteColor: "#df5000",
  templateTagColor: "#333333",
  deletionColor: "#bd2c00",
  titleColor: "#795da3",
  sectionColor: "#63a35c",
  commentColor: "#969896",
  metaKeywordColor: "#333333",
  metaColor: "#969896",
  functionColor: "#333333",
  numberColor: "#333333"
};

var googlecode = {
  lineNumberColor: "black",
  lineNumberBgColor: "white",
  backgroundColor: "white",
  textColor: "black",
  substringColor: "#000",
  keywordColor: "#008",
  attributeColor: "#000",
  selectorAttributeColor: "#008",
  docTagColor: "#606",
  nameColor: "#008",
  builtInColor: "#606",
  literalColor: "#066",
  bulletColor: "#066",
  codeColor: "black",
  additionColor: undefined,
  regexpColor: "#080",
  symbolColor: "#066",
  variableColor: "#660",
  templateVariableColor: "#660",
  linkColor: "#066",
  selectorClassColor: "#9B703F",
  typeColor: "#606",
  stringColor: "#080",
  selectorIdColor: "#9B703F",
  quoteColor: "#800",
  templateTagColor: "black",
  deletionColor: undefined,
  titleColor: "#606",
  sectionColor: "#008",
  commentColor: "#800",
  metaKeywordColor: "black",
  metaColor: "#066",
  functionColor: "black",
  numberColor: "#066"
};

var hopscotch = {
  lineNumberColor: "#b9b5b8",
  lineNumberBgColor: "#322931",
  backgroundColor: "#322931",
  textColor: "#b9b5b8",
  substringColor: "#b9b5b8",
  keywordColor: "#c85e7c",
  attributeColor: "#dd464c",
  selectorAttributeColor: "#c85e7c",
  docTagColor: "#b9b5b8",
  nameColor: "#dd464c",
  builtInColor: "#fd8b19",
  literalColor: "#fd8b19",
  bulletColor: "#8fc13e",
  codeColor: "#b9b5b8",
  additionColor: "#8fc13e",
  regexpColor: "#dd464c",
  symbolColor: "#8fc13e",
  variableColor: "#dd464c",
  templateVariableColor: "#dd464c",
  linkColor: "#dd464c",
  selectorClassColor: "#dd464c",
  typeColor: "#fd8b19",
  stringColor: "#8fc13e",
  selectorIdColor: "#dd464c",
  quoteColor: "#989498",
  templateTagColor: "#b9b5b8",
  deletionColor: "#dd464c",
  titleColor: "#1290bf",
  sectionColor: "#1290bf",
  commentColor: "#989498",
  metaKeywordColor: "#b9b5b8",
  metaColor: "#149b93",
  functionColor: "#1290bf",
  numberColor: "#fd8b19"
};

var hybrid = {
  lineNumberColor: "#c5c8c6",
  lineNumberBgColor: "#1d1f21",
  backgroundColor: "#1d1f21",
  textColor: "#c5c8c6",
  substringColor: "#8abeb7",
  keywordColor: "#81a2be",
  attributeColor: "#b294bb",
  selectorAttributeColor: "#81a2be",
  docTagColor: "#b5bd68",
  nameColor: "#f0c674",
  builtInColor: "#de935f",
  literalColor: "#cc6666",
  bulletColor: "#81a2be",
  codeColor: "#b294bb",
  additionColor: "#b5bd68",
  regexpColor: "#b5bd68",
  symbolColor: "#cc6666",
  variableColor: "#8abeb7",
  templateVariableColor: "#8abeb7",
  linkColor: "#cc6666",
  selectorClassColor: "#de935f",
  typeColor: "#de935f",
  stringColor: "#b5bd68",
  selectorIdColor: "#b294bb",
  quoteColor: "#de935f",
  templateTagColor: "#8abeb7",
  deletionColor: "#cc6666",
  titleColor: "#f0c674",
  sectionColor: "#de935f",
  commentColor: "#707880",
  metaKeywordColor: "#c5c8c6",
  metaColor: "#707880",
  functionColor: "#c5c8c6",
  numberColor: "#cc6666"
};

var irBlack = {
  lineNumberColor: "#f8f8f8",
  lineNumberBgColor: "#000",
  backgroundColor: "#000",
  textColor: "#f8f8f8",
  substringColor: "#daefa3",
  keywordColor: "#96cbfe",
  attributeColor: "#ffffb6",
  selectorAttributeColor: "#96cbfe",
  docTagColor: "#ffffb6",
  nameColor: "#96cbfe",
  builtInColor: "#f8f8f8",
  literalColor: "#c6c5fe",
  bulletColor: "#c6c5fe",
  codeColor: "#f8f8f8",
  additionColor: "#a8ff60",
  regexpColor: "#e9c062",
  symbolColor: "#c6c5fe",
  variableColor: "#c6c5fe",
  templateVariableColor: "#c6c5fe",
  linkColor: "#e9c062",
  selectorClassColor: "#f8f8f8",
  typeColor: "#ffffb6",
  stringColor: "#a8ff60",
  selectorIdColor: "#ffffb6",
  quoteColor: "#7c7c7c",
  templateTagColor: "#f8f8f8",
  deletionColor: "#ff73fd",
  titleColor: "#ffffb6",
  sectionColor: "#ffffb6",
  commentColor: "#7c7c7c",
  metaKeywordColor: "#f8f8f8",
  metaColor: "#7c7c7c",
  functionColor: "#f8f8f8",
  numberColor: "#ff73fd"
};

var monoBlue = {
  lineNumberColor: "#00193a",
  lineNumberBgColor: "#eaeef3",
  backgroundColor: "#eaeef3",
  textColor: "#00193a",
  substringColor: "#4c81c9",
  keywordColor: undefined,
  attributeColor: "#4c81c9",
  selectorAttributeColor: undefined,
  docTagColor: undefined,
  nameColor: "#0048ab",
  builtInColor: "#0048ab",
  literalColor: "#0048ab",
  bulletColor: "#4c81c9",
  codeColor: "#00193a",
  additionColor: "#0048ab",
  regexpColor: "#4c81c9",
  symbolColor: "#4c81c9",
  variableColor: "#4c81c9",
  templateVariableColor: "#4c81c9",
  linkColor: "#4c81c9",
  selectorClassColor: "#0048ab",
  typeColor: "#0048ab",
  stringColor: "#0048ab",
  selectorIdColor: "#0048ab",
  quoteColor: "#0048ab",
  templateTagColor: "#00193a",
  deletionColor: "#4c81c9",
  titleColor: "#0048ab",
  sectionColor: "#0048ab",
  commentColor: "#738191",
  metaKeywordColor: "#00193a",
  metaColor: "#4c81c9",
  functionColor: "#00193a",
  numberColor: "#00193a"
};

var monokaiSublime = {
  lineNumberColor: "#f8f8f2",
  lineNumberBgColor: "#23241f",
  backgroundColor: "#23241f",
  textColor: "#f8f8f2",
  substringColor: "#f8f8f2",
  keywordColor: "#f92672",
  attributeColor: "#66d9ef",
  selectorAttributeColor: "#f92672",
  docTagColor: "#f8f8f2",
  nameColor: "#f92672",
  builtInColor: "#e6db74",
  literalColor: "#ae81ff",
  bulletColor: "#ae81ff",
  codeColor: "#a6e22e",
  additionColor: "#e6db74",
  regexpColor: "#ae81ff",
  symbolColor: "#66d9ef",
  variableColor: "#e6db74",
  templateVariableColor: "#e6db74",
  linkColor: "#ae81ff",