mirror of
https://github.com/facebook/docusaurus.git
synced 2025-04-29 10:17:55 +02:00
Enable using Prism for syntax highlighting (#735)
* Enable user to use prism.js as syntax highlighter * add package-lock * if 'usePrism' is true, use prismjs on all languages * don't get lang by hljs if use prism * Update api-site-config.md * Update api-doc-markdown.md * only load prism css when usePrism is true
This commit is contained in:
Endilie Yacop Sucipto
Yangshun Tay
parent
16da2fdbf6
commit
c8bc00a3a7
10 changed files with 292 additions and 12 deletions
|
|
@ -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 (
|
||||
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
|
||||
<Text>Docusaurus</Text>
|
||||
<Button
|
||||
title="Click me"
|
||||
onPress={() => this.props.navigation.push('Docusaurus')}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -175,7 +175,12 @@ class Head extends React.Component {
|
|||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{this.props.config.usePrism && (
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href={this.props.config.baseUrl + 'css/prism.css'}
|
||||
/>
|
||||
)}
|
||||
{/* Site defined code. Keep these at the end to avoid overriding. */}
|
||||
<link
|
||||
rel="stylesheet"
|
||||
|
|
|
|||
|
|
@ -7,11 +7,16 @@
|
|||
|
||||
const hljs = require('highlight.js');
|
||||
const Markdown = require('remarkable');
|
||||
const prismjs = require('prismjs');
|
||||
|
||||
const anchors = require('./anchors.js');
|
||||
|
||||
const CWD = process.cwd();
|
||||
|
||||
const alias = {
|
||||
js: 'jsx',
|
||||
};
|
||||
|
||||
class MarkdownRenderer {
|
||||
constructor() {
|
||||
const siteConfig = require(CWD + '/siteConfig.js');
|
||||
|
|
@ -19,13 +24,29 @@ class MarkdownRenderer {
|
|||
const md = new Markdown({
|
||||
// Highlight.js expects hljs css classes on the code element.
|
||||
// This results in <pre><code class="hljs css javascript">
|
||||
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) {}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1870,4 +1870,4 @@ footer .social {
|
|||
footer.nav-footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
130
lib/static/css/prism.css
Normal file
130
lib/static/css/prism.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
74
package-lock.json
generated
74
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
|
|
|
|||
32
yarn.lock
32
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"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue