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

* add themeUrl option to support custom theme file path

* Update api-site-config.md
This commit is contained in:
huang.xinghui 2018-04-19 23:04:49 +08:00 committed by Joel Marcey
parent 40a9047620
commit aa32ff4a55
3 changed files with 12 additions and 15 deletions

View file

@ -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.

View file

@ -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"

View file

@ -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) {