hammy
/
carbon
mirror of https://github.com/sgoudham/carbon.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

delay loading highlightjs & codemirror theme (#309)

Browse Source
main
Ian Wang 7 years ago committed by Michael Fix
parent 9dd8d3a9c4
commit 6bf64a6ae0
2 changed files with 68 additions and 57 deletions
Show Stats Download Patch File Download Diff File

12
components/Carbon.js
Unescape Escape View File

@ -1,4 +1,3 @@
import * as hljs from 'highlight.js'
import React, { PureComponent } from 'react' import React, { PureComponent } from 'react'
import Spinner from 'react-spinner' import Spinner from 'react-spinner'
import ResizeObserver from 'resize-observer-polyfill' import ResizeObserver from 'resize-observer-polyfill'
@ -51,13 +50,20 @@ class Carbon extends PureComponent {
this.props.updateTitleBar(newTitle) this.props.updateTitleBar(newTitle)
} }
async getHighlightLang(code = '') {
if (!this.hljs) {
this.hljs = await import('highlight.js')
}
return this.hljs.highlightAuto(code).language
}
handleLanguageChange = debounce( handleLanguageChange = debounce(
(newCode, config) => { async (newCode, config) => {
const props = (config && config.customProps) || this.props const props = (config && config.customProps) || this.props
if (props.config.language === 'auto') { if (props.config.language === 'auto') {
// try to set the language // try to set the language
const detectedLanguage = hljs.highlightAuto(newCode).language const detectedLanguage = await this.getHighlightLang(newCode)
const languageMode = const languageMode =
LANGUAGE_MODE_HASH[detectedLanguage] || LANGUAGE_NAME_HASH[detectedLanguage] LANGUAGE_MODE_HASH[detectedLanguage] || LANGUAGE_NAME_HASH[detectedLanguage]

113
components/Meta.js
Unescape Escape View File

@ -7,60 +7,65 @@ import Typography from './style/Typography'
import '../static/react-crop.css' import '../static/react-crop.css'
import '../static/react-spinner.css' import '../static/react-spinner.css'
export default () => ( export default () => {
<div className="meta"> const onBrowser = typeof window !== 'undefined'
<Head> return (
<meta charSet="utf-8" /> <div className="meta">
<meta httpEquiv="X-UA-Compatible" content="IE=edge" /> <Head>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta charSet="utf-8" />
<meta <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
name="description" <meta name="viewport" content="width=device-width, initial-scale=1" />
content="Carbon is the easiest way to create and share beautiful images of your source code." <meta
/> name="description"
<meta name="application-name" content="Carbon" /> content="Carbon is the easiest way to create and share beautiful images of your source code."
<meta name="twitter:title" content="Carbon" /> />
<meta <meta name="application-name" content="Carbon" />
name="twitter:description" <meta name="twitter:title" content="Carbon" />
content="Carbon is the easiest way to create and share beautiful images of your source code." <meta
/> name="twitter:description"
<meta name="og:title" content="Carbon" /> content="Carbon is the easiest way to create and share beautiful images of your source code."
<meta />
name="og:description" <meta name="og:title" content="Carbon" />
content="Carbon is the easiest way to create and share beautiful images of your source code." <meta
/> name="og:description"
<meta name="og:image" content="/static/banner.png" /> content="Carbon is the easiest way to create and share beautiful images of your source code."
<meta name="theme-color" content="#121212" /> />
<title>Carbon</title> <meta name="og:image" content="/static/banner.png" />
<link rel="shortcut icon" href="/static/favicon.ico" /> <meta name="theme-color" content="#121212" />
<link rel="stylesheet" href="/_next/static/style.css" /> <title>Carbon</title>
<link <link rel="shortcut icon" href="/static/favicon.ico" />
rel="stylesheet" <link rel="stylesheet" href="/_next/static/style.css" />
href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.min.css"
/>
<link
rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/theme/solarized.min.css"
/>
{THEMES.filter(t => t.hasStylesheet !== false).map(theme => (
<link <link
key={theme.id}
rel="stylesheet" rel="stylesheet"
href={ href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.26.0/codemirror.min.css"
theme.link ||
`//cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/theme/${theme.id}.min.css`
}
/> />
))} <link
</Head> rel="stylesheet"
<Reset /> href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.30.0/theme/solarized.min.css"
<Font /> />
<Typography /> {onBrowser
<style jsx> ? THEMES.filter(t => t.hasStylesheet !== false).map(theme => (
{` <link
.meta { key={theme.id}
display: none; rel="stylesheet"
} href={
`} theme.link ||
</style> `//cdnjs.cloudflare.com/ajax/libs/codemirror/5.36.0/theme/${theme.id}.min.css`
</div> }
) />
))
: null}
</Head>
<Reset />
<Font />
<Typography />
<style jsx>
{`
.meta {
display: none;
}
`}
</style>
</div>
)
}

Write Preview
Loading…
Cancel
Save