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 2018-06-10 02:38:01 +08:00 committed by Yangshun Tay
parent 16da2fdbf6
commit c8bc00a3a7
10 changed files with 292 additions and 12 deletions

View file

@ -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>
);
}
}
```