diff --git a/components/Carbon.js b/components/Carbon.js index 00c9d82..2c5f6e7 100644 --- a/components/Carbon.js +++ b/components/Carbon.js @@ -1,4 +1,3 @@ -import * as hljs from 'highlight.js' import React, { PureComponent } from 'react' import Spinner from 'react-spinner' import ResizeObserver from 'resize-observer-polyfill' @@ -51,13 +50,20 @@ class Carbon extends PureComponent { this.props.updateTitleBar(newTitle) } + async getHighlightLang(code = '') { + if (!this.hljs) { + this.hljs = await import('highlight.js') + } + return this.hljs.highlightAuto(code).language + } + handleLanguageChange = debounce( - (newCode, config) => { + async (newCode, config) => { const props = (config && config.customProps) || this.props if (props.config.language === 'auto') { // try to set the language - const detectedLanguage = hljs.highlightAuto(newCode).language + const detectedLanguage = await this.getHighlightLang(newCode) const languageMode = LANGUAGE_MODE_HASH[detectedLanguage] || LANGUAGE_NAME_HASH[detectedLanguage] diff --git a/components/Meta.js b/components/Meta.js index 70b4516..34030f4 100644 --- a/components/Meta.js +++ b/components/Meta.js @@ -7,60 +7,65 @@ import Typography from './style/Typography' import '../static/react-crop.css' import '../static/react-spinner.css' -export default () => ( -
- - - - - - - - - - - - - Carbon - - - - - {THEMES.filter(t => t.hasStylesheet !== false).map(theme => ( +export default () => { + const onBrowser = typeof window !== 'undefined' + return ( +
+ + + + + + + + + + + + + Carbon + + - ))} - - - - - -
-) + + {onBrowser + ? THEMES.filter(t => t.hasStylesheet !== false).map(theme => ( + + )) + : null} + + + + + +
+ ) +}