From aa32ff4a558269a2ac02f265489804ab83cc0145 Mon Sep 17 00:00:00 2001 From: "huang.xinghui" Date: Thu, 19 Apr 2018 23:04:49 +0800 Subject: [PATCH] Add customize highlight.theme custom path support (#517) * add themeUrl option to support custom theme file path * Update api-site-config.md --- docs/api-site-config.md | 1 + lib/core/Head.js | 20 +++++++++++--------- lib/core/Site.js | 6 ------ 3 files changed, 12 insertions(+), 15 deletions(-) diff --git a/docs/api-site-config.md b/docs/api-site-config.md index ff445ac185b4..ffec5100b067 100644 --- a/docs/api-site-config.md +++ b/docs/api-site-config.md @@ -129,6 +129,7 @@ h1 { - `version` specifies a particular version of Highlight.js to be used. - `hljs` provides an escape valve by passing an instance of Highlight.js to the function specified here, allowing additional languages to be registered for syntax highlighting. - `defaultLang` defines a default language. It will be used if one is not specified at the top of the code block. You can find the [list of supported languages here](https://github.com/isagalaev/highlight.js/tree/master/src/languages). + - `themeUrl` is the custom URL of CSS theme file that you want to use with Highlight.js. If this is provided, the `theme` and `version` fields will be ignored. `markdownPlugins` - An array of plugins to be loaded by Remarkable, the markdown parser and renderer used by Docusaurus. The plugin will receive a reference to the Remarkable instance, allowing custom parsing and rendering rules to be defined. diff --git a/lib/core/Head.js b/lib/core/Head.js index d8a14b8dc571..f25a0273e79b 100644 --- a/lib/core/Head.js +++ b/lib/core/Head.js @@ -16,13 +16,18 @@ class Head extends React.Component { if (link.blog) hasBlog = true; }); - const highlightDefaultVersion = '9.12.0'; - const highlightConfig = this.props.config.highlight || { - version: highlightDefaultVersion, + let highlight = { + version: '9.12.0', theme: 'default', + ...this.props.config.highlight, }; - const highlightVersion = highlightConfig.version || highlightDefaultVersion; - const highlightTheme = highlightConfig.theme || 'default'; + + // Use user-provided themeUrl if it exists, else construct one from version and theme. + let highlightThemeURL = highlight.themeUrl + ? highlight.themeUrl + : `//cdnjs.cloudflare.com/ajax/libs/highlight.js/${ + highlight.version + }/styles/${highlight.theme}.min.css`; return ( @@ -73,10 +78,7 @@ class Head extends React.Component { href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" /> )} - + {hasBlog && (