Skip to content

Commit

Permalink
Enable user to use prism.js as syntax highlighter
Browse files Browse the repository at this point in the history
  • Loading branch information
endiliey committed Jun 7, 2018
1 parent 49c27b7 commit c151957
Show file tree
Hide file tree
Showing 7 changed files with 214 additions and 1 deletion.
28 changes: 28 additions & 0 deletions docs/api-doc-markdown.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Up @@ -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.
Expand Down
20 changes: 19 additions & 1 deletion lib/core/renderMarkdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {}
}
Expand Down
131 changes: 131 additions & 0 deletions lib/static/css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -1871,3 +1871,134 @@ footer .social {
flex-shrink: 0;
}
}

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

0 comments on commit c151957

Please sign in to comment.