diff --git a/components/BackgroundSelect.js b/components/BackgroundSelect.js
index 4c09326..4b01a0f 100644
--- a/components/BackgroundSelect.js
+++ b/components/BackgroundSelect.js
@@ -31,7 +31,7 @@ class BackgroundSelect extends React.PureComponent {
       isVisible,
       toggleVisibility,
       carbonRef,
-      updateHighlights
+      updateHighlights,
     } = this.props
 
     const background = validateColor(color) ? color : DEFAULT_BG_COLOR
diff --git a/components/Billing.js b/components/Billing.js
index b8979c7..a888b21 100644
--- a/components/Billing.js
+++ b/components/Billing.js
@@ -105,17 +105,17 @@ function Billing(props) {
                       fontSmoothing: 'antialiased',
 
                       ':-webkit-autofill': {
-                        color: '#fce883'
+                        color: '#fce883',
                       },
                       '::placeholder': {
-                        color: 'rgba(255, 255, 255, 0.7)'
-                      }
+                        color: 'rgba(255, 255, 255, 0.7)',
+                      },
                     },
                     invalid: {
                       iconColor: COLORS.RED,
-                      color: COLORS.RED
-                    }
-                  }
+                      color: COLORS.RED,
+                    },
+                  },
                 }}
               />
               <hr />
@@ -262,7 +262,7 @@ function Billing(props) {
 
 const BillingWithStripe = injectStripe(Billing)
 
-export default function() {
+export default function () {
   const [stripe, setStripe] = React.useState(null)
   React.useEffect(() => {
     setStripe(window.Stripe(process.env.STRIPE_PUBLIC_KEY))
diff --git a/components/Carbon.js b/components/Carbon.js
index da9e823..0aeea62 100644
--- a/components/Carbon.js
+++ b/components/Carbon.js
@@ -19,14 +19,14 @@ import {
   LANGUAGE_NAME_HASH,
   LANGUAGE_MIME_HASH,
   DEFAULT_SETTINGS,
-  THEMES_HASH
+  THEMES_HASH,
 } from '../lib/constants'
 
 const SelectionEditor = dynamic(() => import('./SelectionEditor'), {
-  loading: () => null
+  loading: () => null,
 })
 const Watermark = dynamic(() => import('./svg/Watermark'), {
-  loading: () => null
+  loading: () => null,
 })
 
 function searchLanguage(l) {
@@ -38,7 +38,7 @@ function noop() {}
 class Carbon extends React.PureComponent {
   static defaultProps = {
     onChange: noop,
-    onGutterClick: noop
+    onGutterClick: noop,
   }
   state = {}
 
@@ -65,7 +65,7 @@ class Carbon extends React.PureComponent {
     ms('300ms'),
     {
       leading: true,
-      trailing: true
+      trailing: true,
     }
   )
 
@@ -90,12 +90,12 @@ class Carbon extends React.PureComponent {
     if (selection.head.line + selection.head.ch > selection.anchor.line + selection.anchor.ch) {
       this.currentSelection = {
         from: selection.anchor,
-        to: selection.head
+        to: selection.head,
       }
     } else {
       this.currentSelection = {
         from: selection.head,
-        to: selection.anchor
+        to: selection.anchor,
       }
     }
   }
@@ -117,7 +117,7 @@ class Carbon extends React.PureComponent {
         changes.italics != null && `font-style: ${changes.italics ? 'italic' : 'initial'}`,
         changes.underline != null &&
           `text-decoration: ${changes.underline ? 'underline' : 'initial'}`,
-        changes.color != null && `color: ${changes.color} !important`
+        changes.color != null && `color: ${changes.color} !important`,
       ]
         .filter(Boolean)
         .join('; ')
@@ -150,10 +150,10 @@ class Carbon extends React.PureComponent {
       lineWrapping: true,
       smartIndent: true,
       extraKeys: {
-        'Shift-Tab': 'indentLess'
+        'Shift-Tab': 'indentLess',
       },
       readOnly: this.props.readOnly,
-      showInvisibles: config.hiddenCharacters
+      showInvisibles: config.hiddenCharacters,
     }
     const backgroundImage =
       (this.props.config.backgroundImage && this.props.config.backgroundImageSelection) ||
@@ -423,14 +423,14 @@ function selectedLinesReducer(
 
   return {
     selected: { ...selected, ...newState },
-    prevLine: lineNumber
+    prevLine: lineNumber,
   }
 }
 
 function useSelectedLines(props, editorRef) {
   const [state, dispatch] = React.useReducer(selectedLinesReducer, {
     prevLine: null,
-    selected: {}
+    selected: {},
   })
 
   React.useEffect(() => {
@@ -450,7 +450,7 @@ function useSelectedLines(props, editorRef) {
     if (props.config.selectedLines) {
       dispatch({
         type: 'MULTILINE',
-        selectedLines: props.config.selectedLines
+        selectedLines: props.config.selectedLines,
       })
     }
   }, [props.config.selectedLines])
diff --git a/components/ColorPicker.js b/components/ColorPicker.js
index 6b9bc5d..4d4d30e 100644
--- a/components/ColorPicker.js
+++ b/components/ColorPicker.js
@@ -6,7 +6,7 @@ import { COLORS } from '../lib/constants'
 const pickerStyle = {
   backgroundColor: COLORS.BLACK,
   padding: '8px 8px 0',
-  margin: '0 auto 1px'
+  margin: '0 auto 1px',
 }
 
 const ColorPicker = ({ onChange = () => {}, color, presets, style, disableAlpha }) => (
diff --git a/components/Dropdown.js b/components/Dropdown.js
index 6ad1418..d23a585 100644
--- a/components/Dropdown.js
+++ b/components/Dropdown.js
@@ -9,7 +9,7 @@ import { COLORS } from '../lib/constants'
 class Dropdown extends React.PureComponent {
   state = {
     inputValue: this.props.selected.name,
-    itemsToShow: this.props.list
+    itemsToShow: this.props.list,
   }
 
   onUserAction = changes => {
@@ -66,7 +66,7 @@ class Dropdown extends React.PureComponent {
       itemWrapper,
       icon,
       disableInput,
-      title
+      title,
     } = this.props
     const { itemsToShow, inputValue } = this.state
 
@@ -91,7 +91,7 @@ class Dropdown extends React.PureComponent {
           icon,
           disableInput,
           title,
-          labelId
+          labelId,
         })}
       </Downshift>
     )
@@ -105,7 +105,7 @@ const renderDropdown = ({ color, list, itemWrapper, icon, disableInput, title, l
   getRootProps,
   getToggleButtonProps,
   getInputProps,
-  getItemProps
+  getItemProps,
 }) => {
   return (
     <DropdownContainer {...getRootProps({ refKey: 'innerRef' })}>
@@ -132,7 +132,7 @@ const renderDropdown = ({ color, list, itemWrapper, icon, disableInput, title, l
               {...getItemProps({
                 item,
                 isSelected: selectedItem.name === item.name,
-                isHighlighted: highlightedIndex === index
+                isHighlighted: highlightedIndex === index,
               })}
             >
               {item.name}
@@ -197,7 +197,7 @@ const SelectedItem = ({
   isOpen,
   color,
   hasIcon,
-  disabled
+  disabled,
 }) => {
   const itemColor = color || COLORS.SECONDARY
 
diff --git a/components/Editor.js b/components/Editor.js
index 84080bc..6196a54 100644
--- a/components/Editor.js
+++ b/components/Editor.js
@@ -31,7 +31,7 @@ import {
   DEFAULT_SETTINGS,
   DEFAULT_LANGUAGE,
   DEFAULT_THEME,
-  FONTS
+  FONTS,
 } from '../lib/constants'
 import { serializeState, getRouteState } from '../lib/routing'
 import { getSettings, unescapeHtml, formatCode, omit } from '../lib/util'
@@ -39,7 +39,7 @@ import { getSettings, unescapeHtml, formatCode, omit } from '../lib/util'
 const languageIcon = <LanguageIcon />
 
 const SnippetToolbar = dynamic(() => import('./SnippetToolbar'), {
-  loading: () => null
+  loading: () => null,
 })
 
 const getConfig = omit(['code'])
@@ -53,7 +53,7 @@ class Editor extends React.Component {
     this.state = {
       ...DEFAULT_SETTINGS,
       ...this.props.snippet,
-      loading: true
+      loading: true,
     }
 
     this.exportImage = this.exportImage.bind(this)
@@ -77,7 +77,7 @@ class Editor extends React.Component {
       ...(this.props.snippet ? null : getSettings(localStorage)),
       // and then URL params
       ...queryState,
-      loading: false
+      loading: false,
     }
 
     // Makes sure the slash in 'application/X' is decoded
@@ -107,7 +107,7 @@ class Editor extends React.Component {
 
   onUpdate = debounce(updates => this.props.onUpdate(updates), 750, {
     trailing: true,
-    leading: true
+    leading: true,
   })
   updateState = updates => this.setState(updates, () => this.onUpdate(this.state))
 
@@ -119,7 +119,7 @@ class Editor extends React.Component {
       type,
       squared = this.state.squaredImage,
       exportSize = (EXPORT_SIZES_HASH[this.state.exportSize] || DEFAULT_EXPORT_SIZE).value,
-      includeTransparentRow = false
+      includeTransparentRow = false,
     } = { format: 'png' }
   ) {
     // if safari, get image from api
@@ -129,7 +129,7 @@ class Editor extends React.Component {
       // pull from custom theme highlights, or state highlights
       const encodedState = serializeState({
         ...this.state,
-        highlights: { ...themeConfig.highlights, ...this.state.highlights }
+        highlights: { ...themeConfig.highlights, ...this.state.highlights },
       })
       return this.context.image(encodedState)
     }
@@ -160,7 +160,7 @@ class Editor extends React.Component {
       style: {
         transform: `scale(${exportSize})`,
         'transform-origin': 'center',
-        background: squared ? this.state.backgroundColor : 'none'
+        background: squared ? this.state.backgroundColor : 'none',
       },
       filter: n => {
         if (n.className) {
@@ -178,7 +178,7 @@ class Editor extends React.Component {
         return true
       },
       width,
-      height
+      height,
     }
 
     // current font-family used
@@ -254,8 +254,8 @@ class Editor extends React.Component {
     return this.getCarbonImage({ format: 'png', type: 'blob' }).then(blob =>
       navigator.clipboard.write([
         new window.ClipboardItem({
-          'image/png': blob
-        })
+          'image/png': blob,
+        }),
       ])
     )
   }
@@ -277,7 +277,7 @@ class Editor extends React.Component {
         backgroundImage: file.content,
         backgroundImageSelection: null,
         backgroundMode: 'image',
-        preset: null
+        preset: null,
       })
     } else {
       this.updateState({ code: file.content, language: 'auto' })
@@ -297,7 +297,7 @@ class Editor extends React.Component {
         code:
           code.replace(unsplashPhotographerCredit, '') +
           `\n\n// Photo by ${photographer.name} on Unsplash`,
-        preset: null
+        preset: null,
       }))
     } else {
       this.updateState({ ...changes, preset: null })
@@ -309,8 +309,8 @@ class Editor extends React.Component {
     this.setState(({ highlights = {} }) => ({
       highlights: {
         ...highlights,
-        ...updates
-      }
+        ...updates,
+      },
     }))
 
   createTheme = theme => {
@@ -341,7 +341,7 @@ class Editor extends React.Component {
       .then(() =>
         this.props.setToasts({
           type: 'SET',
-          toasts: [{ children: 'Snippet duplicated!', timeout: 3000 }]
+          toasts: [{ children: 'Snippet duplicated!', timeout: 3000 }],
         })
       )
 
@@ -352,7 +352,7 @@ class Editor extends React.Component {
       .then(() =>
         this.props.setToasts({
           type: 'SET',
-          toasts: [{ children: 'Snippet deleted', timeout: 3000 }]
+          toasts: [{ children: 'Snippet deleted', timeout: 3000 }],
         })
       )
 
@@ -364,7 +364,7 @@ class Editor extends React.Component {
       backgroundImage,
       backgroundMode,
       code,
-      exportSize
+      exportSize,
     } = this.state
 
     const config = getConfig(this.state)
@@ -493,7 +493,7 @@ function isImage(file) {
 
 Editor.defaultProps = {
   onUpdate: () => {},
-  onReset: () => {}
+  onReset: () => {},
 }
 
 export default Editor
diff --git a/components/EditorContainer.js b/components/EditorContainer.js
index cd8f696..19c5a5a 100644
--- a/components/EditorContainer.js
+++ b/components/EditorContainer.js
@@ -84,7 +84,7 @@ function EditorContainer(props) {
             setSnippet(newSnippet)
             setToasts({
               type: 'ADD',
-              toast: { children: 'Snippet saved!', closable: true }
+              toast: { children: 'Snippet saved!', closable: true },
             })
           }
         })
@@ -92,7 +92,7 @@ function EditorContainer(props) {
         update(snippetId, updates).then(() => {
           setToasts({
             type: 'ADD',
-            toast: { children: 'Snippet saved!', closable: true }
+            toast: { children: 'Snippet saved!', closable: true },
           })
         })
       }
diff --git a/components/ExportMenu.js b/components/ExportMenu.js
index 82c6140..fa4e8d7 100644
--- a/components/ExportMenu.js
+++ b/components/ExportMenu.js
@@ -40,7 +40,7 @@ function ExportMenu({
   exportSize,
   isVisible,
   toggleVisibility,
-  exportImage: exp
+  exportImage: exp,
 }) {
   const tooLarge = React.useMemo(() => !verifyPayloadSize(backgroundImage), [backgroundImage])
   const online = useOnline()
@@ -56,7 +56,7 @@ function ExportMenu({
 
   const handleExport = format => () =>
     exportImage(format, {
-      filename: input.current && input.current.value
+      filename: input.current && input.current.value,
     })
 
   return (
diff --git a/components/ImagePicker.js b/components/ImagePicker.js
index 310090f..0131e7c 100644
--- a/components/ImagePicker.js
+++ b/components/ImagePicker.js
@@ -43,7 +43,7 @@ const INITIAL_STATE = {
   imageAspectRatio: null,
   pixelCrop: null,
   photographer: null,
-  dataURL: null
+  dataURL: null,
 }
 
 export default class ImagePicker extends React.Component {
@@ -68,10 +68,10 @@ export default class ImagePicker extends React.Component {
         crop: makeAspectCrop(
           {
             ...state.crop,
-            aspect: nextProps.aspectRatio
+            aspect: nextProps.aspectRatio,
           },
           state.imageAspectRatio
-        )
+        ),
       }
     }
     return null
@@ -91,7 +91,7 @@ export default class ImagePicker extends React.Component {
   onCropChange(crop, pixelCrop) {
     this.setState({
       crop: { ...crop, aspect: this.props.aspectRatio },
-      pixelCrop
+      pixelCrop,
     })
   }
 
@@ -101,12 +101,12 @@ export default class ImagePicker extends React.Component {
       x: 0,
       y: 0,
       width: 100,
-      aspect: this.props.aspectRatio
+      aspect: this.props.aspectRatio,
     }
 
     this.setState({
       imageAspectRatio,
-      crop: makeAspectCrop(initialCrop, imageAspectRatio)
+      crop: makeAspectCrop(initialCrop, imageAspectRatio),
     })
   }
 
@@ -115,7 +115,7 @@ export default class ImagePicker extends React.Component {
       this.props.onChange({
         backgroundImage: url,
         backgroundImageSelection: null,
-        photographer
+        photographer,
       })
     })
   }
@@ -131,7 +131,7 @@ export default class ImagePicker extends React.Component {
         if (err.message.indexOf('Network Error') > -1) {
           this.setState({
             error:
-              'Fetching the image failed. This is probably a CORS-related issue. You can either enable CORS in your browser, or use another image.'
+              'Fetching the image failed. This is probably a CORS-related issue. You can either enable CORS in your browser, or use another image.',
           })
         }
       })
@@ -170,7 +170,7 @@ export default class ImagePicker extends React.Component {
         operator: palette[9],
         meta: palette[10],
         tag: palette[11],
-        comment: palette[12]
+        comment: palette[12],
       })
     }
   }
@@ -179,7 +179,7 @@ export default class ImagePicker extends React.Component {
     this.setState(INITIAL_STATE, () => {
       this.props.onChange({
         backgroundImage: null,
-        backgroundImageSelection: null
+        backgroundImageSelection: null,
       })
     })
   }
diff --git a/components/ListSetting.js b/components/ListSetting.js
index a91d94c..9035feb 100644
--- a/components/ListSetting.js
+++ b/components/ListSetting.js
@@ -7,7 +7,7 @@ import { toggle } from '../lib/util'
 class ListSetting extends React.Component {
   static defaultProps = {
     onOpen: () => {},
-    onClose: () => {}
+    onClose: () => {},
   }
 
   state = { isVisible: false }
diff --git a/components/Meta.js b/components/Meta.js
index 14014d5..181f155 100644
--- a/components/Meta.js
+++ b/components/Meta.js
@@ -26,8 +26,9 @@ export const StylesheetLink = ({ theme }) => {
     href = `/static/themes/${theme}.min.css`
   } else {
     const themeDef = THEMES_HASH[theme]
-    href = `//cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/theme/${themeDef &&
-      (themeDef.link || themeDef.id)}.min.css`
+    href = `//cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/theme/${
+      themeDef && (themeDef.link || themeDef.id)
+    }.min.css`
   }
 
   return <Link href={href} />
@@ -71,8 +72,9 @@ export const MetaLinks = React.memo(() => {
         <Link key={id} href={`/static/themes/${id}.min.css`} />
       ))}
       {CDN_STYLESHEETS.map(themeDef => {
-        const href = `//cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/theme/${themeDef &&
-          (themeDef.link || themeDef.id)}.min.css`
+        const href = `//cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.2/theme/${
+          themeDef && (themeDef.link || themeDef.id)
+        }.min.css`
         return <Link key={themeDef.id} href={href} />
       })}
     </React.Fragment>
diff --git a/components/Popout.js b/components/Popout.js
index e319de3..9d94d5c 100644
--- a/components/Popout.js
+++ b/components/Popout.js
@@ -8,7 +8,7 @@ import { toggle } from '../lib/util'
 export const managePopout = WrappedComponent => {
   class PopoutManager extends React.Component {
     state = {
-      isVisible: false
+      isVisible: false,
     }
 
     toggleVisibility = () => this.setState(toggle('isVisible'))
@@ -46,7 +46,7 @@ export const managePopout = WrappedComponent => {
 class Popout extends React.PureComponent {
   static defaultProps = {
     borderColor: COLORS.SECONDARY,
-    style: {}
+    style: {},
   }
 
   render() {
diff --git a/components/Presets.js b/components/Presets.js
index 266ec7f..8fd0196 100644
--- a/components/Presets.js
+++ b/components/Presets.js
@@ -11,7 +11,7 @@ const removeButtonStyles = {
   right: '6px',
   width: '11px',
   height: '11px',
-  borderRadius: '999px'
+  borderRadius: '999px',
 }
 
 const Preset = React.memo(({ remove, apply, selected, preset }) => {
@@ -32,7 +32,7 @@ const Preset = React.memo(({ remove, apply, selected, preset }) => {
           backgroundPosition: 'center center',
           backgroundSize: 'contain',
           backgroundImage: `url('${preset.icon}')`,
-          backgroundColor: preset.backgroundColor
+          backgroundColor: preset.backgroundColor,
         }}
       />
       {preset.custom && (
@@ -68,7 +68,7 @@ const arrowButtonStyle = {
   position: 'absolute',
   top: 0,
   right: '16px',
-  height: '100%'
+  height: '100%',
 }
 
 const Presets = React.memo(
diff --git a/components/SelectionEditor.js b/components/SelectionEditor.js
index 2950f2e..0781f0d 100644
--- a/components/SelectionEditor.js
+++ b/components/SelectionEditor.js
@@ -25,25 +25,25 @@ function reducer(state, action) {
     case 'BOLD': {
       return {
         ...state,
-        bold: !state.bold
+        bold: !state.bold,
       }
     }
     case 'ITALICS': {
       return {
         ...state,
-        italics: !state.italics
+        italics: !state.italics,
       }
     }
     case 'UNDERLINE': {
       return {
         ...state,
-        underline: !state.underline
+        underline: !state.underline,
       }
     }
     case 'COLOR': {
       return {
         ...state,
-        color: action.color
+        color: action.color,
       }
     }
   }
@@ -59,7 +59,7 @@ function SelectionEditor({ onChange }) {
     bold: null,
     italics: null,
     underline: null,
-    color: null
+    color: null,
   })
 
   React.useEffect(() => {
diff --git a/components/Settings.js b/components/Settings.js
index fff5d62..fc1338b 100644
--- a/components/Settings.js
+++ b/components/Settings.js
@@ -32,7 +32,7 @@ function WindowSettings({
   widthAdjustment,
   watermark,
   onWidthChanging,
-  onWidthChanged
+  onWidthChanged,
 }) {
   return (
     <div className="settings-content">
@@ -112,7 +112,7 @@ function EditorSettings({
   firstLineNumber,
   hiddenCharacters,
   onWidthChanging,
-  onWidthChanged
+  onWidthChanged,
 }) {
   return (
     <div className="settings-content">
@@ -236,7 +236,7 @@ function MiscSettings({ format, reset, applyPreset, settings }) {
 
 const settingButtonStyle = {
   width: '40px',
-  height: '100%'
+  height: '100%',
 }
 
 class Settings extends React.PureComponent {
@@ -245,7 +245,7 @@ class Settings extends React.PureComponent {
     selectedMenu: 'Window',
     showPresets: true,
     previousSettings: null,
-    widthChanging: false
+    widthChanging: false,
   }
 
   settingsRef = React.createRef()
@@ -254,7 +254,7 @@ class Settings extends React.PureComponent {
   componentDidMount() {
     const storedPresets = getPresets(localStorage) || []
     this.setState(({ presets }) => ({
-      presets: [...storedPresets, ...presets]
+      presets: [...storedPresets, ...presets],
     }))
   }
 
@@ -322,7 +322,7 @@ class Settings extends React.PureComponent {
     newPreset.icon = await this.props.getCarbonImage({
       format: 'png',
       squared: true,
-      exportSize: 1
+      exportSize: 1,
     })
 
     this.props.onChange('preset', newPreset.id)
@@ -330,7 +330,7 @@ class Settings extends React.PureComponent {
     this.setState(
       ({ presets }) => ({
         previousSettings: null,
-        presets: [newPreset, ...presets]
+        presets: [newPreset, ...presets],
       }),
       this.savePresets
     )
@@ -420,7 +420,7 @@ class Settings extends React.PureComponent {
             position: widthChanging ? 'fixed' : 'absolute',
             width: '316px',
             top: widthChanging ? this.settingPosition.top : 'initial',
-            left: widthChanging ? this.settingPosition.left : 'initial'
+            left: widthChanging ? this.settingPosition.left : 'initial',
           }}
         >
           <Presets
diff --git a/components/Slider.js b/components/Slider.js
index 7d9e6d9..15c0866 100644
--- a/components/Slider.js
+++ b/components/Slider.js
@@ -6,7 +6,7 @@ class Slider extends React.Component {
   static defaultProps = {
     onMouseDown: () => {},
     onMouseUp: () => {},
-    unit: 'px'
+    unit: 'px',
   }
 
   handleChange = e => {
@@ -23,9 +23,9 @@ class Slider extends React.Component {
         <div
           className="slider-bg"
           style={{
-            transform: `translate3d(${(((parseFloat(this.props.value) - minValue) * 1.0) /
-              (maxValue - minValue)) *
-              100}%, 0px, 0px)`
+            transform: `translate3d(${
+              (((parseFloat(this.props.value) - minValue) * 1.0) / (maxValue - minValue)) * 100
+            }%, 0px, 0px)`,
           }}
         />
         <label>{this.props.label}</label>
diff --git a/components/SnippetToolbar.js b/components/SnippetToolbar.js
index 7e6b8c1..9d2ea53 100644
--- a/components/SnippetToolbar.js
+++ b/components/SnippetToolbar.js
@@ -73,7 +73,7 @@ function SnippetToolbar(props) {
         marginBottom: 0,
         flexDirection: 'row-reverse',
         // justifyContent: 'space-between',
-        zIndex: 1
+        zIndex: 1,
       }}
     >
       <DuplicateButton onClick={props.onCreate} />
diff --git a/components/Themes/ThemeCreate.js b/components/Themes/ThemeCreate.js
index 43fe6a1..a9d6202 100644
--- a/components/Themes/ThemeCreate.js
+++ b/components/Themes/ThemeCreate.js
@@ -11,7 +11,7 @@ import { stringifyRGBA, generateId } from '../../lib/util'
 const colorPickerStyle = {
   backgroundColor: COLORS.BLACK,
   padding: 0,
-  margin: '4px'
+  margin: '4px',
 }
 
 const colorPresets = []
@@ -54,7 +54,7 @@ const ThemeCreate = ({
   create,
   updateHighlights,
   name,
-  onInputChange
+  onInputChange,
 }) => {
   const [preset, updatePreset] = React.useState(theme.id)
   const [highlight, selectHighlight] = React.useState()
@@ -103,7 +103,7 @@ const ThemeCreate = ({
                       backgroundColor: highlights[key],
                       boxShadow: `inset 0px 0px 0px ${highlight === key ? 2 : 1}px ${
                         COLORS.SECONDARY
-                      }`
+                      }`,
                     }}
                   />
                 </div>
@@ -124,7 +124,7 @@ const ThemeCreate = ({
               id: `theme:${generateId()}`,
               name,
               highlights,
-              custom: true
+              custom: true,
             })
           }
         >
diff --git a/components/Themes/index.js b/components/Themes/index.js
index 6e61bb0..9de6f3c 100644
--- a/components/Themes/index.js
+++ b/components/Themes/index.js
@@ -8,7 +8,7 @@ import RemoveIcon from '../svg/Remove'
 import { COLORS } from '../../lib/constants'
 
 const ThemeCreate = dynamic(() => import('./ThemeCreate'), {
-  loading: () => null
+  loading: () => null,
 })
 
 const ThemeItem = ({ children, item, isSelected, remove }) => (
@@ -52,7 +52,7 @@ const getCustomName = themes =>
 
 class Themes extends React.PureComponent {
   state = {
-    name: ''
+    name: '',
   }
 
   dropdown = React.createRef()
@@ -60,7 +60,7 @@ class Themes extends React.PureComponent {
   static getDerivedStateFromProps(props) {
     if (!props.isVisible) {
       return {
-        name: getCustomName(props.themes)
+        name: getCustomName(props.themes),
       }
     }
     return null
@@ -95,9 +95,9 @@ class Themes extends React.PureComponent {
     const dropdownList = [
       {
         id: 'create',
-        name: 'Create +'
+        name: 'Create +',
       },
-      ...themes
+      ...themes,
     ]
 
     return (
diff --git a/components/Toggle.js b/components/Toggle.js
index 36ed2e5..751d400 100644
--- a/components/Toggle.js
+++ b/components/Toggle.js
@@ -5,7 +5,7 @@ import { COLORS } from '../lib/constants'
 
 class Toggle extends React.PureComponent {
   static defaultProps = {
-    className: ''
+    className: '',
   }
 
   toggle = () => this.props.onChange(!this.props.enabled)
diff --git a/components/svg/Copy.js b/components/svg/Copy.js
index 2b7a1f5..726e30c 100644
--- a/components/svg/Copy.js
+++ b/components/svg/Copy.js
@@ -23,7 +23,7 @@ const Copy = ({ size, color }) => {
 }
 
 Copy.defaultProps = {
-  size: 16
+  size: 16,
 }
 
 export default Copy
diff --git a/lib/api.js b/lib/api.js
index 2264bab..ec0717d 100644
--- a/lib/api.js
+++ b/lib/api.js
@@ -10,8 +10,8 @@ import { DEFAULT_CODE, DEFAULT_SETTINGS } from './constants'
 export const client = axios.create({
   baseURL: `${process.env.API_URL || ''}/api`,
   headers: {
-    Accept: 'application/json'
-  }
+    Accept: 'application/json',
+  },
 })
 
 function tweet(content, encodedImage) {
@@ -20,7 +20,7 @@ function tweet(content, encodedImage) {
   return client
     .post('/twitter', {
       imageData: processedData,
-      altText: content
+      altText: content,
     })
     .then(res => res.data.url)
     .then(url => encodeURIComponent(`Created with @carbon_app ${url}`))
@@ -70,7 +70,7 @@ const unsplash = {
   async random() {
     const imageUrls = await client.get('/unsplash/random')
     return Promise.all(imageUrls.data.map(downloadThumbnailImage))
-  }
+  },
 }
 
 function getSnippet(uid = '', { host } = {}) {
@@ -92,11 +92,11 @@ function listSnippets(page) {
       client
         .get(`/snippets`, {
           params: {
-            page
+            page,
           },
           headers: {
-            authorization
-          }
+            authorization,
+          },
         })
         .then(res => res.data)
         .catch(e => {
@@ -115,7 +115,7 @@ function updateSnippet(uid, state) {
 
   const data = {
     ...sanitized,
-    code: state.code != null ? state.code : DEFAULT_CODE
+    code: state.code != null ? state.code : DEFAULT_CODE,
   }
 
   if (uid) {
@@ -148,7 +148,7 @@ function deleteSnippet(uid) {
 
 const createSnippet = debounce(data => updateSnippet(null, data), ms('5s'), {
   leading: true,
-  trailing: false
+  trailing: false,
 })
 
 export default {
@@ -157,10 +157,10 @@ export default {
     list: listSnippets,
     update: debounce(updateSnippet, ms('1s'), { leading: true, trailing: true }),
     create: createSnippet,
-    delete: id => deleteSnippet(id)
+    delete: id => deleteSnippet(id),
   },
   tweet: debounce(tweet, ms('5s'), { leading: true, trailing: false }),
   image: debounce(image, ms('5s'), { leading: true, trailing: false }),
   unsplash,
-  downloadThumbnailImage
+  downloadThumbnailImage,
 }
diff --git a/lib/client.js b/lib/client.js
index 35eae05..f27d8eb 100644
--- a/lib/client.js
+++ b/lib/client.js
@@ -10,16 +10,13 @@ if (firebase.apps.length === 0) {
       projectId: process.env.FIREBASE_PROJECT_ID,
       storageBucket: `${process.env.FIREBASE_PROJECT_ID}.appspot.com`,
       messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
-      appId: process.env.FIREBASE_FE_APP_ID
+      appId: process.env.FIREBASE_FE_APP_ID,
     })
   }
 }
 
 export function logout() {
-  return firebase
-    .auth()
-    .signOut()
-    .catch(console.error)
+  return firebase.auth().signOut().catch(console.error)
 }
 
 export function login(provider) {
@@ -33,7 +30,7 @@ export function login(provider) {
 export function loginGitHub() {
   const provider = new firebase.auth.GithubAuthProvider()
   provider.setCustomParameters({
-    allow_signup: 'true'
+    allow_signup: 'true',
   })
   return login(provider)
 }
diff --git a/lib/constants.js b/lib/constants.js
index 3d17518..57c64eb 100644
--- a/lib/constants.js
+++ b/lib/constants.js
@@ -13,7 +13,7 @@ export const FONTS = [
   { id: 'Monoid', name: 'Monoid' },
   { id: 'Source Code Pro', name: 'Source Code Pro' },
   { id: 'Space Mono', name: 'Space Mono' },
-  { id: 'Ubuntu Mono', name: 'Ubuntu Mono' }
+  { id: 'Ubuntu Mono', name: 'Ubuntu Mono' },
 ]
 
 export const HIGHLIGHT_KEYS = [
@@ -28,7 +28,7 @@ export const HIGHLIGHT_KEYS = [
   'number',
   'string',
   'comment',
-  'meta'
+  'meta',
 ]
 
 export const THEMES = [
@@ -47,8 +47,8 @@ export const THEMES = [
       number: '#a16a94',
       string: '#fded02',
       comment: '#cdab53',
-      meta: '#555'
-    }
+      meta: '#555',
+    },
   },
   {
     id: 'a11y-dark',
@@ -66,8 +66,8 @@ export const THEMES = [
       string: '#ffd700',
       comment: '#d4d0ab',
       meta: '#d4d0ab',
-      tag: '#dcc6e0'
-    }
+      tag: '#dcc6e0',
+    },
   },
   {
     id: 'blackboard',
@@ -85,8 +85,8 @@ export const THEMES = [
       string: '#61CE3C',
       comment: '#AEAEAE',
       meta: '#D8FA3C',
-      tag: '#8DA6CE'
-    }
+      tag: '#8DA6CE',
+    },
   },
   {
     id: 'base16-dark',
@@ -104,8 +104,8 @@ export const THEMES = [
       string: '#f4bf75',
       comment: '#8f5536',
       meta: '#555',
-      tag: '#ac4142'
-    }
+      tag: '#ac4142',
+    },
   },
   {
     id: 'base16-light',
@@ -124,8 +124,8 @@ export const THEMES = [
       string: '#f4bf75',
       comment: '#8f5536',
       meta: '#555',
-      tag: '#ac4142'
-    }
+      tag: '#ac4142',
+    },
   },
   {
     id: 'cobalt',
@@ -143,8 +143,8 @@ export const THEMES = [
       string: '#3ad900',
       comment: '#08f',
       meta: '#ff9d00',
-      tag: '#9effff'
-    }
+      tag: '#9effff',
+    },
   },
   {
     id: 'dracula',
@@ -162,8 +162,8 @@ export const THEMES = [
       string: '#f1fa8c',
       comment: '#6272a4',
       meta: '#f8f8f2',
-      tag: '#ff79c6'
-    }
+      tag: '#ff79c6',
+    },
   },
   {
     id: 'duotone-dark',
@@ -181,8 +181,8 @@ export const THEMES = [
       string: '#ffb870',
       comment: '#6c6783',
       meta: '#555',
-      tag: '#eeebff'
-    }
+      tag: '#eeebff',
+    },
   },
   {
     id: 'hopscotch',
@@ -200,8 +200,8 @@ export const THEMES = [
       string: '#fdcc59',
       comment: '#b33508',
       meta: '#555',
-      tag: '#dd464c'
-    }
+      tag: '#dd464c',
+    },
   },
   {
     id: 'lucario',
@@ -219,8 +219,8 @@ export const THEMES = [
       string: '#E6DB74',
       comment: '#5c98cd',
       meta: '#f8f8f2',
-      tag: '#ff6541'
-    }
+      tag: '#ff6541',
+    },
   },
   {
     id: 'material',
@@ -238,8 +238,8 @@ export const THEMES = [
       string: '#C3E88D',
       comment: '#546E7A',
       meta: '#80CBC4',
-      tag: 'rgba(255, 83, 112, 1)'
-    }
+      tag: 'rgba(255, 83, 112, 1)',
+    },
   },
   {
     id: 'monokai',
@@ -257,8 +257,8 @@ export const THEMES = [
       string: '#e6db74',
       comment: '#75715e',
       meta: '#555',
-      tag: '#bc6283'
-    }
+      tag: '#bc6283',
+    },
   },
   {
     id: 'night-owl',
@@ -275,8 +275,8 @@ export const THEMES = [
       number: '#F78C6C',
       string: '#ecc48d',
       comment: '#5c6370',
-      meta: '#7fdbca'
-    }
+      meta: '#7fdbca',
+    },
   },
   {
     id: 'nord',
@@ -294,8 +294,8 @@ export const THEMES = [
       string: '#A3BE8C',
       comment: '#4C566A',
       meta: '#81A1C1',
-      tag: '#81A1C1'
-    }
+      tag: '#81A1C1',
+    },
   },
   {
     id: 'oceanic-next',
@@ -313,8 +313,8 @@ export const THEMES = [
       string: '#99C794',
       comment: '#65737E',
       meta: '#555',
-      tag: '#C594C5'
-    }
+      tag: '#C594C5',
+    },
   },
   {
     id: 'one-light',
@@ -333,8 +333,8 @@ export const THEMES = [
       string: '#50a14f',
       comment: '#a0a1a7',
       meta: '#383a42',
-      tag: '#e45649'
-    }
+      tag: '#e45649',
+    },
   },
   {
     id: 'one-dark',
@@ -352,8 +352,8 @@ export const THEMES = [
       string: '#98c379',
       comment: '#5c6370',
       meta: '#abb2bf',
-      tag: '#e06c75'
-    }
+      tag: '#e06c75',
+    },
   },
   {
     id: 'panda-syntax',
@@ -371,8 +371,8 @@ export const THEMES = [
       string: '#19F9D8',
       comment: '#676B79',
       meta: '#b084eb',
-      tag: '#ff2c6d'
-    }
+      tag: '#ff2c6d',
+    },
   },
   {
     id: 'paraiso-dark',
@@ -390,8 +390,8 @@ export const THEMES = [
       string: '#fec418',
       comment: '#e96ba8',
       meta: '#555',
-      tag: '#ef6155'
-    }
+      tag: '#ef6155',
+    },
   },
   {
     id: 'seti',
@@ -409,8 +409,8 @@ export const THEMES = [
       string: '#55b5db',
       comment: '#41535b',
       meta: '#55b5db',
-      tag: '#55b5db'
-    }
+      tag: '#55b5db',
+    },
   },
   {
     id: 'shades-of-purple',
@@ -428,8 +428,8 @@ export const THEMES = [
       string: '#A5FF90',
       comment: '#B362FF',
       meta: '#FF9D00',
-      tag: '#9EFFFF'
-    }
+      tag: '#9EFFFF',
+    },
   },
   {
     id: 'solarized dark',
@@ -448,8 +448,8 @@ export const THEMES = [
       string: '#859900',
       comment: '#586e75',
       meta: '#859900',
-      tag: '#93a1a1'
-    }
+      tag: '#93a1a1',
+    },
   },
   {
     id: 'solarized light',
@@ -469,8 +469,8 @@ export const THEMES = [
       string: '#859900',
       comment: '#586e75',
       meta: '#859900',
-      tag: '#93a1a1'
-    }
+      tag: '#93a1a1',
+    },
   },
   {
     id: 'synthwave-84',
@@ -488,8 +488,8 @@ export const THEMES = [
       string: '#ff8b39',
       comment: '#6d77b3',
       meta: '#ff8b39',
-      tag: '#f92aad'
-    }
+      tag: '#f92aad',
+    },
   },
   {
     id: 'twilight',
@@ -507,8 +507,8 @@ export const THEMES = [
       string: '#8f9d6a',
       comment: '#777',
       meta: '#f7f7f7',
-      tag: '#997643'
-    }
+      tag: '#997643',
+    },
   },
   {
     id: 'verminal',
@@ -526,8 +526,8 @@ export const THEMES = [
       string: '#98c379',
       comment: '#5c6370',
       meta: '#abb2bf',
-      tag: '#e06c75'
-    }
+      tag: '#e06c75',
+    },
   },
   {
     id: 'vscode',
@@ -545,8 +545,8 @@ export const THEMES = [
       string: '#CE9178',
       comment: '#6A9955',
       meta: '#D4D4D4',
-      tag: '#569cd6'
-    }
+      tag: '#569cd6',
+    },
   },
   {
     id: 'yeti',
@@ -565,8 +565,8 @@ export const THEMES = [
       string: '#96c0d8',
       comment: '#d4c8be',
       meta: '#96c0d8',
-      tag: '#96c0d8'
-    }
+      tag: '#96c0d8',
+    },
   },
   {
     id: 'zenburn',
@@ -584,9 +584,9 @@ export const THEMES = [
       string: '#cc9393',
       comment: '#7f9f7f',
       meta: '#f0dfaf',
-      tag: '#93e0e3'
-    }
-  }
+      tag: '#93e0e3',
+    },
+  },
 ]
 
 export const THEMES_HASH = toHash(THEMES)
@@ -594,404 +594,404 @@ export const THEMES_HASH = toHash(THEMES)
 export const LANGUAGES = [
   {
     name: 'Auto',
-    mode: 'auto'
+    mode: 'auto',
   },
   {
     name: 'Apache',
     mode: 'apache',
     mime: 'text/apache',
     custom: true,
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Bash',
     mode: 'shell',
     mime: 'application/x-sh',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Plain Text',
-    mode: 'text'
+    mode: 'text',
   },
   {
     name: 'C',
     mode: 'clike',
     mime: 'text/x-csrc',
-    short: 'c'
+    short: 'c',
   },
   {
     name: 'C++',
     mode: 'clike',
     mime: 'text/x-c++src',
     short: 'cpp',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'C#',
     mode: 'clike',
     mime: 'text/x-csharp',
     short: 'cs',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Clojure',
     mode: 'clojure',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'COBOL',
-    mode: 'cobol'
+    mode: 'cobol',
   },
   {
     name: 'CoffeeScript',
     mode: 'coffeescript',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Crystal',
     mode: 'crystal',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'CSS',
     mode: 'css',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'D',
     mode: 'd',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Dart',
     mode: 'dart',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Diff',
     mode: 'diff',
     mime: 'text/x-diff',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Django',
     mode: 'django',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Docker',
     mode: 'dockerfile',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Elixir',
     mode: 'elixir',
     custom: true,
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Elm',
     mode: 'elm',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Erlang',
     mode: 'erlang',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Fortran',
     mode: 'fortran',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Gherkin',
     mode: 'gherkin',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'GraphQL',
     mode: 'graphql',
-    custom: true
+    custom: true,
   },
   {
     name: 'Go',
     mode: 'go',
     mime: 'text/x-go',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Groovy',
     mode: 'groovy',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Handlebars',
     mode: 'handlebars',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Haskell',
     mode: 'haskell',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'HTML/XML',
-    mode: 'htmlmixed'
+    mode: 'htmlmixed',
   },
   {
     name: 'Java',
     mode: 'clike',
     mime: 'text/x-java',
     short: 'java',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'JavaScript',
     mode: 'javascript',
     short: 'javascript',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'JSON',
     mode: 'javascript',
     mime: 'application/json',
     short: 'json',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'JSX',
     mode: 'jsx',
-    short: 'jsx'
+    short: 'jsx',
   },
   {
     name: 'Julia',
     mode: 'julia',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Kotlin',
     mode: 'clike',
     mime: 'text/x-kotlin',
     short: 'kotlin',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'LaTeX',
-    mode: 'stex'
+    mode: 'stex',
   },
   {
     name: 'Lisp',
-    mode: 'commonlisp'
+    mode: 'commonlisp',
   },
   {
     name: 'Lua',
     mode: 'lua',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Markdown',
     mode: 'markdown',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Mathematica',
     mode: 'mathematica',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'MATLAB/Octave',
     mode: 'octave',
-    mime: 'text/x-octave'
+    mime: 'text/x-octave',
   },
   {
     name: 'MySQL',
     mode: 'sql',
     mime: 'text/x-mysql',
-    short: 'mysql'
+    short: 'mysql',
   },
   {
     name: 'N-Triples',
     mode: 'ntriples',
-    mime: 'application/n-triples'
+    mime: 'application/n-triples',
   },
   {
     name: 'NGINX',
     mode: 'nginx',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Nim',
     mode: 'nimrod',
     custom: true,
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Objective C',
     mode: 'clike',
     mime: 'text/x-objectivec',
     short: 'objectivec',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'OCaml/F#',
-    mode: 'mllike'
+    mode: 'mllike',
   },
   {
     name: 'Pascal',
-    mode: 'pascal'
+    mode: 'pascal',
   },
   {
     name: 'Perl',
     mode: 'perl',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'PHP',
     mode: 'php',
     mime: 'text/x-php',
     short: 'php',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'PowerShell',
     mode: 'powershell',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Python',
     mode: 'python',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'R',
     mode: 'r',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'RISC-V',
     mode: 'riscv',
-    custom: true
+    custom: true,
   },
   {
     name: 'Ruby',
     mode: 'ruby',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Rust',
     mode: 'rust',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Sass',
-    mode: 'sass'
+    mode: 'sass',
   },
   {
     name: 'Scala',
     mode: 'clike',
     mime: 'text/x-scala',
     short: 'scala',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Smalltalk',
     mode: 'smalltalk',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Solidity',
     mode: 'solidity',
-    custom: true
+    custom: true,
   },
   {
     name: 'SPARQL',
     mode: 'sparql',
-    mime: 'application/sparql-query'
+    mime: 'application/sparql-query',
   },
   {
     name: 'SQL',
     mode: 'sql',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Stylus',
     mode: 'stylus',
     mime: 'stylus',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Swift',
     mode: 'swift',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'TCL',
     mode: 'tcl',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'TOML',
-    mode: 'toml'
+    mode: 'toml',
   },
   {
     name: 'Turtle',
     mode: 'turtle',
-    mime: 'text/turtle'
+    mime: 'text/turtle',
   },
   {
     name: 'TypeScript',
     mode: 'javascript',
     mime: 'application/typescript',
     short: 'typescript',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'TSX',
     mode: 'jsx',
     mime: 'text/typescript-jsx',
-    short: 'tsx'
+    short: 'tsx',
   },
   {
     name: 'Twig',
     mode: 'twig',
     mime: 'text/x-twig',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'VB.NET',
-    mode: 'vb'
+    mode: 'vb',
   },
   {
     name: 'Verilog',
     mode: 'verilog',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'VHDL',
     mode: 'vhdl',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'Vue',
-    mode: 'vue'
+    mode: 'vue',
   },
   {
     name: 'XQuery',
     mode: 'xquery',
-    highlight: true
+    highlight: true,
   },
   {
     name: 'YAML',
     mode: 'yaml',
-    highlight: true
-  }
+    highlight: true,
+  },
 ]
 
 export const EXPORT_SIZES = [
   { id: '1x', name: '1x', value: 1 },
   { id: '2x', name: '2x', value: 2 },
-  { id: '4x', name: '4x', value: 4 }
+  { id: '4x', name: '4x', value: 4 },
 ]
 
 export const EXPORT_SIZES_HASH = toHash(EXPORT_SIZES)
@@ -1015,7 +1015,7 @@ export const COLORS = {
   PURPLE: '#C198FB',
   DARK_PURPLE: '#55436F',
   RED: '#ff5f56',
-  BLUE: '#57b5f9'
+  BLUE: '#57b5f9',
 }
 
 export const DEFAULT_CODE = `const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj)
@@ -1053,14 +1053,14 @@ export const DEFAULT_SETTINGS = {
   exportSize: '2x',
   watermark: false,
   squaredImage: false,
-  hiddenCharacters: false
+  hiddenCharacters: false,
 }
 
 export const DEFAULT_PRESETS = [
   {
     ...DEFAULT_SETTINGS,
     icon: '/static/presets/4.png',
-    id: 'preset:4'
+    id: 'preset:4',
   },
   {
     ...DEFAULT_SETTINGS,
@@ -1070,7 +1070,7 @@ export const DEFAULT_PRESETS = [
     fontFamily: 'Fira Code',
     lineHeight: '152%',
     icon: '/static/presets/7.png',
-    id: 'preset:7'
+    id: 'preset:7',
   },
   {
     ...DEFAULT_SETTINGS,
@@ -1080,7 +1080,7 @@ export const DEFAULT_PRESETS = [
     fontFamily: 'Fira Code',
     lineHeight: '152%',
     icon: '/static/presets/8.png',
-    id: 'preset:8'
+    id: 'preset:8',
   },
   {
     ...DEFAULT_SETTINGS,
@@ -1090,7 +1090,7 @@ export const DEFAULT_PRESETS = [
     windowTheme: 'bw',
     lineHeight: '152%',
     icon: '/static/presets/9.png',
-    id: 'preset:9'
+    id: 'preset:9',
   },
   {
     ...DEFAULT_SETTINGS,
@@ -1102,7 +1102,7 @@ export const DEFAULT_PRESETS = [
     fontSize: '14px',
     lineHeight: '143%',
     icon: '/static/presets/0.png',
-    id: 'preset:0'
+    id: 'preset:0',
   },
   {
     ...DEFAULT_SETTINGS,
@@ -1110,7 +1110,7 @@ export const DEFAULT_PRESETS = [
     theme: 'one-light',
     lineHeight: '143%',
     icon: '/static/presets/1.png',
-    id: 'preset:1'
+    id: 'preset:1',
   },
   {
     ...DEFAULT_SETTINGS,
@@ -1120,7 +1120,7 @@ export const DEFAULT_PRESETS = [
     lineHeight: '143%',
     windowControls: false,
     icon: '/static/presets/2.png',
-    id: 'preset:2'
+    id: 'preset:2',
   },
   {
     ...DEFAULT_SETTINGS,
@@ -1129,7 +1129,7 @@ export const DEFAULT_PRESETS = [
     fontFamily: 'IBM Plex Mono',
     lineHeight: '143%',
     icon: '/static/presets/3.png',
-    id: 'preset:3'
+    id: 'preset:3',
   },
 
   {
@@ -1137,7 +1137,7 @@ export const DEFAULT_PRESETS = [
     backgroundColor: 'rgba(222,171,99,1)',
     theme: 'duotone-dark',
     icon: '/static/presets/5.png',
-    id: 'preset:5'
+    id: 'preset:5',
   },
   {
     ...DEFAULT_SETTINGS,
@@ -1147,6 +1147,6 @@ export const DEFAULT_PRESETS = [
     theme: 'solarized light',
     windowTheme: 'sharp',
     icon: '/static/presets/6.png',
-    id: 'preset:6'
-  }
+    id: 'preset:6',
+  },
 ]
diff --git a/lib/custom/modes/apache.js b/lib/custom/modes/apache.js
index 6f99ed8..a65864a 100644
--- a/lib/custom/modes/apache.js
+++ b/lib/custom/modes/apache.js
@@ -4,9 +4,9 @@
 
 const CodeMirror = require('codemirror')
 
-CodeMirror.defineMode('apache', function(/* config */) {
+CodeMirror.defineMode('apache', function (/* config */) {
   return {
-    token: function(stream, state) {
+    token: function (stream, state) {
       var sol = stream.sol() || state.afterSection
       var eol = stream.eol()
 
@@ -123,14 +123,14 @@ CodeMirror.defineMode('apache', function(/* config */) {
     lineComment: '#',
     fold: 'brace',
 
-    startState: function() {
+    startState: function () {
       return {
         position: 'def',
         nextMultiline: false,
         inMultiline: false,
-        afterSection: false
+        afterSection: false,
       }
-    }
+    },
   }
 })
 
diff --git a/lib/custom/modes/nimrod.js b/lib/custom/modes/nimrod.js
index 60e7348..0d6e925 100755
--- a/lib/custom/modes/nimrod.js
+++ b/lib/custom/modes/nimrod.js
@@ -1,6 +1,6 @@
 const CodeMirror = require('codemirror')
 
-CodeMirror.defineMode('nimrod', function(conf, parserConf) {
+CodeMirror.defineMode('nimrod', function (conf, parserConf) {
   var ERRORCLASS = 'error'
 
   function wordRegexp(words) {
@@ -33,11 +33,11 @@ CodeMirror.defineMode('nimrod', function(conf, parserConf) {
     '{',
     '}',
     '.\\.',
-    '.'
+    '.',
   ]
   var operators = new RegExp(
     ops
-      .map(function(op) {
+      .map(function (op) {
         return '\\' + op
       })
       .join('|')
@@ -114,7 +114,7 @@ CodeMirror.defineMode('nimrod', function(conf, parserConf) {
     'isnot',
     'in',
     'as',
-    'of'
+    'of',
   ]
 
   var commonBuiltins = [
@@ -327,7 +327,7 @@ CodeMirror.defineMode('nimrod', function(conf, parserConf) {
     'EFloatDivByZero',
     'EFloatOverflow',
     'EFloatInexact',
-    'EDeadThrea'
+    'EDeadThrea',
   ]
 
   if (parserConf.extra_keywords != undefined)
@@ -503,7 +503,7 @@ CodeMirror.defineMode('nimrod', function(conf, parserConf) {
 
     state.scopes.unshift({
       offset: indentUnit,
-      type: type
+      type: type,
     })
   }
 
@@ -596,18 +596,18 @@ CodeMirror.defineMode('nimrod', function(conf, parserConf) {
   }
 
   var external = {
-    startState: function(basecolumn) {
+    startState: function (basecolumn) {
       return {
         tokenize: tokenBase,
         scopes: [{ offset: basecolumn || 0, type: 'nim' }],
         lastStyle: null,
         lastToken: null,
         lambda: false,
-        dedent: 0
+        dedent: 0,
       }
     },
 
-    token: function(stream, state) {
+    token: function (stream, state) {
       var style = tokenLexer(stream, state)
 
       state.lastStyle = style
@@ -620,14 +620,14 @@ CodeMirror.defineMode('nimrod', function(conf, parserConf) {
       return style
     },
 
-    indent: function(state) {
+    indent: function (state) {
       if (state.tokenize != tokenBase) return state.tokenize.isString ? CodeMirror.Pass : 0
 
       return state.scopes[0].offset
     },
 
     lineComment: '#',
-    fold: 'indent'
+    fold: 'indent',
   }
 
   return external
diff --git a/lib/custom/modes/riscv.js b/lib/custom/modes/riscv.js
index 5a8bb15..f3cd7ab 100644
--- a/lib/custom/modes/riscv.js
+++ b/lib/custom/modes/riscv.js
@@ -10,7 +10,7 @@
 
 const CodeMirror = require('codemirror')
 
-CodeMirror.defineMode('riscv', function(/* config */) {
+CodeMirror.defineMode('riscv', function (/* config */) {
   function regexFromWords(words, ins) {
     return new RegExp('^(?:' + words.join('|') + ')$', ins)
   }
@@ -471,7 +471,7 @@ CodeMirror.defineMode('riscv', function(/* config */) {
       'fsrm',
       'fsflags',
       'fsrmi',
-      'fsflagsi'
+      'fsflagsi',
     ],
     'i'
   )
@@ -548,7 +548,7 @@ CodeMirror.defineMode('riscv', function(/* config */) {
       't4',
       't5',
       't6',
-      'pc'
+      'pc',
     ],
     ''
   )
@@ -597,7 +597,7 @@ CodeMirror.defineMode('riscv', function(/* config */) {
       '.balign',
       '.zero',
       '.float',
-      '.double'
+      '.double',
     ],
     'i'
   )
@@ -638,7 +638,7 @@ CodeMirror.defineMode('riscv', function(/* config */) {
   }
 
   function string(quote) {
-    return function(stream, state) {
+    return function (stream, state) {
       var escaped = false,
         ch
 
@@ -654,11 +654,11 @@ CodeMirror.defineMode('riscv', function(/* config */) {
   }
 
   return {
-    startState: function(basecol) {
+    startState: function (basecol) {
       return { basecol: basecol || 0, indentDepth: 0, cur: normal }
     },
 
-    token: function(stream, state) {
+    token: function (stream, state) {
       if (stream.eatSpace()) return null
 
       var style = state.cur(stream, state)
@@ -671,7 +671,7 @@ CodeMirror.defineMode('riscv', function(/* config */) {
         else if (registers.test(word)) style = 'variable-2'
       }
       return style
-    }
+    },
   }
 })
 
diff --git a/lib/routing.js b/lib/routing.js
index af74835..c0b3932 100644
--- a/lib/routing.js
+++ b/lib/routing.js
@@ -51,8 +51,8 @@ const mapper = new Morph({
       } catch (e) {
         return v
       }
-    }
-  }
+    },
+  },
 })
 
 const readMappings = [
@@ -80,7 +80,7 @@ const readMappings = [
   { field: 'readonly', type: 'bool' },
   { field: 'id' },
   { field: 'highlights', type: 'parse' },
-  { field: 'code', type: 'decode' }
+  { field: 'code', type: 'decode' },
 ]
 
 const writeMappings = [
@@ -103,7 +103,7 @@ const writeMappings = [
   { field: 'squaredImage:si', type: 'bool' },
   { field: 'exportSize:es' },
   { field: 'watermark:wm', type: 'bool' },
-  { field: 'code', type: 'encode' }
+  { field: 'code', type: 'encode' },
 ]
 
 export const serializeState = state => {
@@ -168,7 +168,7 @@ export const getRouteState = router => {
 
   return {
     parameter,
-    queryState
+    queryState,
   }
 }
 
@@ -179,11 +179,11 @@ export const updateRouteState = (router, state) => {
 
   router.replace(
     {
-      pathname: router.pathname
+      pathname: router.pathname,
     },
     {
       pathname: router.pathname,
-      query: mappedState
+      query: mappedState,
     },
     { shallow: true }
   )
diff --git a/lib/util.js b/lib/util.js
index ab72852..a1bb1f2 100644
--- a/lib/util.js
+++ b/lib/util.js
@@ -24,7 +24,7 @@ export const saveSettings = morph.compose(
     'themes',
     'highlights',
     'fontUrl',
-    'selectedLines'
+    'selectedLines',
   ])
 )
 export const savePresets = morph.compose(
@@ -46,10 +46,7 @@ export const toggle = stateField => state => ({ [stateField]: !state[stateField]
 // https://gist.github.com/alexgibson/1704515
 export const escapeHtml = s => {
   if (typeof s === 'string') {
-    return s
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/\//g, '&#x2F;')
+    return s.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\//g, '&#x2F;')
   }
 }
 
@@ -89,13 +86,10 @@ export const formatCode = async code => {
     parser: 'babel',
     plugins: [babylonParser],
     semi: false,
-    singleQuote: true
+    singleQuote: true,
   })
 }
 
 export const stringifyRGBA = obj => `rgba(${obj.r},${obj.g},${obj.b},${obj.a})`
 
-export const generateId = () =>
-  Math.random()
-    .toString(36)
-    .slice(2)
+export const generateId = () => Math.random().toString(36).slice(2)
diff --git a/next.config.js b/next.config.js
index 2c21be1..36199de 100644
--- a/next.config.js
+++ b/next.config.js
@@ -18,28 +18,28 @@ const config = withOffline({
         options: {
           cacheName: 'offlineCache',
           expiration: {
-            maxEntries: 200
-          }
-        }
-      }
-    ]
+            maxEntries: 200,
+          },
+        },
+      },
+    ],
   },
   env: {
     FIREBASE_PROJECT_ID: process.env.FIREBASE_PROJECT_ID,
     FIREBASE_MESSAGING_SENDER_ID: process.env.FIREBASE_MESSAGING_SENDER_ID,
     FIREBASE_FE_APP_ID: process.env.FIREBASE_FE_APP_ID,
     FIREBASE_API_KEY: process.env.FIREBASE_API_KEY,
-    STRIPE_PUBLIC_KEY: process.env.STRIPE_PUBLIC_KEY
+    STRIPE_PUBLIC_KEY: process.env.STRIPE_PUBLIC_KEY,
   },
   webpack: (config, options) => {
     config.module.rules.push({
       test: /\.js$/,
       include: /node_modules\/graphql-language-service-parser/,
-      use: [options.defaultLoaders.babel]
+      use: [options.defaultLoaders.babel],
     })
 
     return config
-  }
+  },
 })
 
 module.exports = process.env.ANALYZE === 'true' ? withBundleAnalyzer(config) : config
diff --git a/pages/[id].js b/pages/[id].js
index 546ab24..a4886ab 100644
--- a/pages/[id].js
+++ b/pages/[id].js
@@ -23,7 +23,7 @@ class IdPage extends React.PureComponent {
       // 404 Not found
       if (res) {
         res.writeHead(302, {
-          Location: '/'
+          Location: '/',
         })
         res.end()
       } else {
diff --git a/pages/account.js b/pages/account.js
index 2fa5276..87e800f 100644
--- a/pages/account.js
+++ b/pages/account.js
@@ -14,7 +14,7 @@ import { loginGitHub, logout } from '../lib/client'
 import { COLORS } from '../lib/constants'
 
 const Billing = dynamic(() => import('../components/Billing'), {
-  loading: () => <div style={{ minHeight: '360px' }} />
+  loading: () => <div style={{ minHeight: '360px' }} />,
 })
 
 function logoutThunk() {
diff --git a/pages/embed/[id].js b/pages/embed/[id].js
index 278f43b..eb8f8fd 100644
--- a/pages/embed/[id].js
+++ b/pages/embed/[id].js
@@ -23,7 +23,7 @@ class EmbedIdPage extends React.PureComponent {
       // 404 Not found
       if (res) {
         res.writeHead(302, {
-          Location: '/embed'
+          Location: '/embed',
         })
         res.end()
       } else {
diff --git a/pages/embed/index.js b/pages/embed/index.js
index 617c8d9..696c930 100644
--- a/pages/embed/index.js
+++ b/pages/embed/index.js
@@ -40,7 +40,7 @@ class Embed extends React.Component {
     code: DEFAULT_CODE,
     mounted: false,
     readOnly: true,
-    key: 0
+    key: 0,
   }
 
   snippet = {}
@@ -54,7 +54,7 @@ class Embed extends React.Component {
         ...queryState,
         copyable: queryState.copy !== false,
         readOnly: queryState.readonly !== false,
-        mounted: true
+        mounted: true,
       },
       this.postMessage
     )
@@ -70,7 +70,7 @@ class Embed extends React.Component {
             // Used by embed provider
             src: window.location.toString(),
             context: 'iframe.resize',
-            height: this.ref.current.offsetHeight
+            height: this.ref.current.offsetHeight,
           }),
           '*'
         ),
@@ -84,7 +84,7 @@ class Embed extends React.Component {
     window.top.postMessage(
       {
         id: this.state.id ? `carbon:${this.state.id}` : 'carbon',
-        code
+        code,
       },
       '*'
     )