Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enable using Prism for syntax highlighting #735

Merged
merged 7 commits into from
Jun 9, 2018
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Enable user to use prism.js as syntax highlighter
endiliey committed Jun 7, 2018

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit 55d9b4f5811d51e1918e8f146cbf76709555b135
28 changes: 28 additions & 0 deletions docs/api-doc-markdown.md
Original file line number Diff line number Diff line change
@@ -180,3 +180,31 @@ While Highlight.js provides support for [many popular languages out of the box](
}
}
```

### Using Prism.js as additional syntax highlighter

While highlight.js support a lot of languages, you can opt to use prism.js to syntax highlight certain languages available on [Prism](https://github.com/PrismJS/prism/tree/master/components). Include those languages in `usePrism` field in your [siteConfig.js](site-config.md)

Example:
```
// siteConfig.js
usePrism: ['jsx']
```

Notice that below code blocks use JSX syntax highlighting from PrismJS

```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>
);
}
}
```
2 changes: 2 additions & 0 deletions docs/api-site-config.md
Original file line number Diff line number Diff line change
@@ -173,6 +173,8 @@ h1 {

`users` - The `users` array mentioned earlier.

`usePrism` - Array of languages to use prism.js syntax highlighter. Refer to [Using PrismJS as additional syntax highlighter](api-doc-markdown.md#using-prismjs-as-additional-syntax-highlighter).

`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.
20 changes: 19 additions & 1 deletion lib/core/renderMarkdown.js
Original file line number Diff line number Diff line change
@@ -7,24 +7,42 @@

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');

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)) {
try {
// try to use prism.js for certain language
if (
siteConfig.usePrism &&
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) {}
}
return hljs.highlight(lang, str).value;
} catch (err) {}
}
131 changes: 131 additions & 0 deletions lib/static/css/main.css
Original file line number Diff line number Diff line change
@@ -1871,3 +1871,134 @@ footer .social {
flex-shrink: 0;
}
}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This increases the CSS payload to all Docusaurus users, even though not all of them will use it. Is it possible to lazy load the CSS if usePrism is true?

/**
* 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;
}
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -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",
1 change: 1 addition & 0 deletions website/siteConfig.js
Original file line number Diff line number Diff line change
@@ -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 changes: 32 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
@@ -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"