diff --git a/docs/api-doc-markdown.md b/docs/api-doc-markdown.md
index 907b5c534c..932284c0c3 100644
--- a/docs/api-doc-markdown.md
+++ b/docs/api-doc-markdown.md
@@ -180,3 +180,31 @@ While Highlight.js provides support for [many popular languages out of the box](
}
}
```
+
+### Using Prism as additional syntax highlighter
+
+While highlight.js supports a lot of languages, you can opt to use Prism to syntax highlight certain languages available in the list [here](https://github.com/PrismJS/prism/tree/master/components). Include those languages in `usePrism` field in your [siteConfig.js](api-site-config.md)
+
+Example:
+```
+// siteConfig.js
+usePrism: ['jsx']
+```
+
+Notice that the code block below uses JSX syntax highlighting from Prism.
+
+```jsx
+class Example extends React.Component {
+ render() {
+ return (
+
+ Docusaurus
+
+ );
+ }
+}
+```
diff --git a/docs/api-site-config.md b/docs/api-site-config.md
index 95fbe89495..862c1da0b7 100644
--- a/docs/api-site-config.md
+++ b/docs/api-site-config.md
@@ -173,6 +173,8 @@ h1 {
`users` - The `users` array mentioned earlier.
+`usePrism` - Array of languages to use Prism syntax highlighter. Refer to [Using Prism as additional syntax highlighter](api-doc-markdown.md#using-prism-as-additional-syntax-highlighter). Set it to `true` to use Prism on all languages.
+
`wrapPagesHTML` - Boolean flag to indicate whether `html` files in `/pages` should be wrapped with Docusaurus site styles, header and footer. This feature is experimental and relies on the files being `html` fragments instead of complete pages. It inserts the contents of your `html` file with no extra processing. Defaults to `false`.
Users can also add their own custom fields if they wish to provide some data across different files.
diff --git a/lib/core/Head.js b/lib/core/Head.js
index 1334796bef..1d4b52d8db 100644
--- a/lib/core/Head.js
+++ b/lib/core/Head.js
@@ -175,7 +175,12 @@ class Head extends React.Component {
}}
/>
)}
-
+ {this.props.config.usePrism && (
+
+ )}
{/* Site defined code. Keep these at the end to avoid overriding. */}
- langPrefix: 'hljs css ',
+ langPrefix: 'hljs css languages- ',
highlight: function(str, lang) {
lang =
lang || (siteConfig.highlight && siteConfig.highlight.defaultLang);
- if (lang && hljs.getLanguage(lang)) {
+ if (lang) {
try {
- return hljs.highlight(lang, str).value;
+ if (
+ siteConfig.usePrism === true ||
+ (siteConfig.usePrism &&
+ siteConfig.usePrism.length > 0 &&
+ siteConfig.usePrism.indexOf(lang) !== -1)
+ ) {
+ try {
+ const language = alias[lang] || lang;
+ // Currently people using prismjs on Node have to individually require()
+ // every single language (https://github.com/PrismJS/prism/issues/593)
+ require('prismjs/components/prism-' + language + '.min');
+ return prismjs.highlight(str, prismjs.languages[language]);
+ } catch (err) {}
+ }
+ if (hljs.getLanguage(lang)) {
+ return hljs.highlight(lang, str).value;
+ }
} catch (err) {}
}
diff --git a/lib/static/css/main.css b/lib/static/css/main.css
index cca1b8e33b..a619cc93c0 100644
--- a/lib/static/css/main.css
+++ b/lib/static/css/main.css
@@ -1870,4 +1870,4 @@ footer .social {
footer.nav-footer {
flex-shrink: 0;
}
-}
+}
\ No newline at end of file
diff --git a/lib/static/css/prism.css b/lib/static/css/prism.css
new file mode 100644
index 0000000000..3a997e04f3
--- /dev/null
+++ b/lib/static/css/prism.css
@@ -0,0 +1,130 @@
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+ color: black;
+ background: none;
+ text-shadow: 0 1px white;
+ font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+ text-align: left;
+ white-space: pre;
+ word-spacing: normal;
+ word-break: normal;
+ word-wrap: normal;
+ line-height: 1.5;
+
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
+ text-shadow: none;
+}
+
+pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
+code[class*="language-"]::selection, code[class*="language-"] ::selection {
+ text-shadow: none;
+}
+
+@media print {
+ code[class*="language-"],
+ pre[class*="language-"] {
+ text-shadow: none;
+ }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+ padding: 1em;
+ margin: .5em 0;
+ overflow: auto;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+ padding: .1em;
+ border-radius: .3em;
+ white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+ color: slategray;
+}
+
+.token.punctuation {
+ color: #999;
+}
+
+.namespace {
+ opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.constant,
+.token.symbol,
+.token.deleted {
+ color: #905;
+}
+
+.token.selector,
+.token.number,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+ color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+ color: #9a6e3a;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+ color: #07a;
+}
+
+.token.function,
+.token.class-name {
+ color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+ color: #e90;
+}
+
+.token.important,
+.token.bold {
+ font-weight: bold;
+}
+.token.italic {
+ font-style: italic;
+}
+
+.token.entity {
+ cursor: help;
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 8dbe2e2c92..416624bde4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2016,6 +2016,17 @@
"resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz",
"integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk="
},
+ "clipboard": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.1.tgz",
+ "integrity": "sha512-7yhQBmtN+uYZmfRjjVjKa0dZdWuabzpSKGtyQZN+9C8xlC788SSJjOHWh7tzurfwTqTD5UDYAhIv5fRJg3sHjQ==",
+ "optional": true,
+ "requires": {
+ "good-listener": "^1.2.2",
+ "select": "^1.1.2",
+ "tiny-emitter": "^2.0.0"
+ }
+ },
"cliui": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
@@ -2647,6 +2658,12 @@
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
},
+ "delegate": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+ "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+ "optional": true
+ },
"depd": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -3471,12 +3488,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -3491,17 +3510,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"core-util-is": {
"version": "1.0.2",
@@ -3618,7 +3640,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"ini": {
"version": "1.3.5",
@@ -3630,6 +3653,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -3644,6 +3668,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -3651,12 +3676,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"minipass": {
"version": "2.2.4",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"safe-buffer": "^5.1.1",
"yallist": "^3.0.0"
@@ -3675,6 +3702,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -3755,7 +3783,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"object-assign": {
"version": "4.1.1",
@@ -3767,6 +3796,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"wrappy": "1"
}
@@ -3888,6 +3918,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -4169,6 +4200,15 @@
"sparkles": "^1.0.0"
}
},
+ "good-listener": {
+ "version": "1.2.2",
+ "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+ "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+ "optional": true,
+ "requires": {
+ "delegate": "^3.1.2"
+ }
+ },
"got": {
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/got/-/got-5.7.1.tgz",
@@ -7480,6 +7520,14 @@
}
}
},
+ "prismjs": {
+ "version": "1.14.0",
+ "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.14.0.tgz",
+ "integrity": "sha512-sa2s4m60bXs+kU3jcuUwx3ZCrUH7o0kuqnOOINbODqlRrDB7KY8SRx+xR/D7nHLlgfDdG7zXbRO8wJ+su5Ls0A==",
+ "requires": {
+ "clipboard": "^2.0.0"
+ }
+ },
"private": {
"version": "0.1.8",
"resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -8448,6 +8496,12 @@
}
}
},
+ "select": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+ "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
+ "optional": true
+ },
"semver": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz",
@@ -9571,6 +9625,12 @@
"resolved": "https://registry.npmjs.org/timed-out/-/timed-out-3.1.3.tgz",
"integrity": "sha1-lYYL/MXHbCd/j4Mm/Q9bLiDrohc="
},
+ "tiny-emitter": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.0.2.tgz",
+ "integrity": "sha512-2NM0auVBGft5tee/OxP4PI3d8WItkDM+fPnaRAVo6xTDI2knbz9eC5ArWGqtGlYqiH3RU5yMpdyTTO7MguC4ow==",
+ "optional": true
+ },
"tiny-lr": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/tiny-lr/-/tiny-lr-1.1.1.tgz",
diff --git a/package.json b/package.json
index e834c651b6..056db0b12c 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
"imagemin-svgo": "^6.0.0",
"markdown-toc": "^1.2.0",
"mkdirp": "^0.5.1",
+ "prismjs": "^1.14.0",
"react": "^16.3.2",
"react-dev-utils": "^5.0.1",
"react-dom": "^16.3.2",
diff --git a/website/siteConfig.js b/website/siteConfig.js
index d32ef5ff86..92ba47d50a 100644
--- a/website/siteConfig.js
+++ b/website/siteConfig.js
@@ -43,6 +43,7 @@ const siteConfig = {
},
translationRecruitingLink: 'https://crowdin.com/project/docusaurus',
copyright: 'Copyright © ' + new Date().getFullYear() + ' Facebook Inc.',
+ usePrism: ['jsx'],
highlight: {
theme: 'atom-one-dark',
},
diff --git a/yarn.lock b/yarn.lock
index 0a979217be..1ba04925dd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1235,6 +1235,14 @@ cli-width@^2.0.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
+clipboard@^2.0.0:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.1.tgz#a12481e1c13d8a50f5f036b0560fe5d16d74e46a"
+ dependencies:
+ good-listener "^1.2.2"
+ select "^1.1.2"
+ tiny-emitter "^2.0.0"
+
cliui@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
@@ -1714,6 +1722,10 @@ delayed-stream@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+delegate@^3.1.2:
+ version "3.2.0"
+ resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+
delegates@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
@@ -2535,6 +2547,12 @@ glogg@^1.0.0:
dependencies:
sparkles "^1.0.0"
+good-listener@^1.2.2:
+ version "1.2.2"
+ resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+ dependencies:
+ delegate "^3.1.2"
+
got@^5.0.0:
version "5.7.1"
resolved "https://registry.yarnpkg.com/got/-/got-5.7.1.tgz#5f81635a61e4a6589f180569ea4e381680a51f35"
@@ -4774,6 +4792,12 @@ pretty-format@^21.2.1:
ansi-regex "^3.0.0"
ansi-styles "^3.2.0"
+prismjs@^1.14.0:
+ version "1.14.0"
+ resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.14.0.tgz#bbccfdb8be5d850d26453933cb50122ca0362ae0"
+ optionalDependencies:
+ clipboard "^2.0.0"
+
private@^0.1.6, private@^0.1.8:
version "0.1.8"
resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
@@ -5256,6 +5280,10 @@ seek-bzip@^1.0.3:
dependencies:
commander "~2.8.1"
+select@^1.1.2:
+ version "1.1.2"
+ resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+
semver-regex@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/semver-regex/-/semver-regex-1.0.0.tgz#92a4969065f9c70c694753d55248fc68f8f652c9"
@@ -5829,6 +5857,10 @@ timed-out@^3.0.0:
version "3.1.3"
resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-3.1.3.tgz#95860bfcc5c76c277f8f8326fd0f5b2e20eba217"
+tiny-emitter@^2.0.0:
+ version "2.0.2"
+ resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.0.2.tgz#82d27468aca5ade8e5fd1e6d22b57dd43ebdfb7c"
+
tiny-lr@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/tiny-lr/-/tiny-lr-1.1.1.tgz#9fa547412f238fedb068ee295af8b682c98b2aab"