Add customize highlight.theme custom path support (#517)

* add themeUrl option to support custom theme file path * Update api-site-config.md
facebook · Apr 19, 2018 · aa32ff4 · aa32ff4
1 parent 40a9047
commit aa32ff4
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 15 deletions.
diff --git 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
@@ -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 (
       <head>
@@ -73,10 +78,7 @@ class Head extends React.Component {
             href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"
           />
         )}
-        <link
-          rel="stylesheet"
-          href={`//cdnjs.cloudflare.com/ajax/libs/highlight.js/${highlightVersion}/styles/${highlightTheme}.min.css`}
-        />
+        <link rel="stylesheet" href={highlightThemeURL} />
         {hasBlog && (
           <link
             rel="alternate"

diff --git a/lib/core/Site.js b/lib/core/Site.js
@@ -33,12 +33,6 @@ class Site extends React.Component {
       (this.props.url || 'index.html');
     let docsVersion = this.props.version || 'current';
 
-    const highlightDefaultVersion = '9.12.0';
-    const highlightConfig = this.props.config.highlight || {
-      version: highlightDefaultVersion,
-      theme: 'default',
-    };
-    const highlightVersion = highlightConfig.version || highlightDefaultVersion;
     if (fs.existsSync(CWD + '/versions.json')) {
       const latestVersion = require(CWD + '/versions.json')[0];
       if (docsVersion === latestVersion) {