mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-10 07:37:19 +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:
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue