A lean Prism highlighter component for React
Comes with everything to render Prismjs highlighted code directly to React (Native) elements, global-pollution-free!
```jsx
import React from "react";
import { render } from "react-dom";
import Highlight, { defaultProps } from "prism-react-renderer";
const exampleCode = `
(function someDemo() {
var test = "Hello World!";
console.log(test);
})();
return () =>
{tokens.map((line, i) => (
{line.map((token, key) => (
))}
))}
)}
/* your JSX here! */}
For example, if you were using `styled-components`, it could look like the following demo.
> [Demo with `styled-components`](https://codesandbox.io/s/prism-react-renderer-example-u6vhk?file=/src/WithLineNumbers.js)
```js
import React from "react";
import styled from "styled-components";
import Highlight, { defaultProps } from "prism-react-renderer";
import theme from "prism-react-renderer/themes/nightOwl";
const exampleCode = `
import React, { useState } from "react";
function Example() {
const [count, setCount] = useState(0);
return (
You clicked {count} times
{tokens.map((line, i) => (
{i + 1}
{line.map((token, key) => (
))}
))}
)}
{/* more jsx here */}
)}
` |
A "Token" is an object that represents a piece of content for Prism. It has a `types` property, which is an array
of types that indicate the purpose and styling of a piece of text, and a `content` property, which is the actual
text.
You'd typically iterate over `tokens`, rendering each line, and iterate over its items, rendering out each token, which is a piece of
this line.
### prop getters
> See
> [Kent C. Dodds' blog post about prop getters](https://blog.kentcdodds.com/how-to-give-rendering-control-to-users-with-prop-getters-549eaef76acf)
These functions are used to apply props to the elements that you render. This
gives you maximum flexibility to render what, when, and wherever you like.
You'd typically call these functions with some dictated input and add on all other
props that it should pass through. It'll correctly override and modify the props
that it returns to you, so passing props to it instead of adding them directly is
advisable.
| property | type | description |
| --------------- | -------------- | ----------------------------------------------------------------------------------------------------- |
| `getLineProps` | `function({})` | returns the props you should apply to any list of tokens, i.e. the element that contains your tokens. |
| `getTokenProps` | `function({})` | returns the props you should apply to the elements displaying tokens that you render. |
#### `getLineProps`
You need to add a `line` property (type: `Token[]`) to the object you're passing to
`getLineProps`; It's also advisable to add a `key`.
This getter will return you props to spread onto your line elements (typically `s`).
It will typically return a `className` (if you pass one it'll be appended), `children`,
`style` (if you pass one it'll be merged). It also passes on all other props you pass
to the input.
The `className` will always contain `.token-line`.
#### `getTokenProps`
You need to add a `token` property (type: `Token`) to the object you're passing to
`getTokenProps`; It's also advisable to add a `key`.
This getter will return you props to spread onto your token elements (typically `s`).
It will typically return a `className` (if you pass one it'll be appended), `children`,
`style` (if you pass one it'll be merged). It also passes on all other props you pass
to the input.
The `className` will always contain `.token`. This also provides full compatibility with
your old Prism CSS-file themes.
## Theming
The `defaultProps` you'd typically apply in a basic use-case, contain a default theme.
This theme is [duotoneDark](./src/themes/duotoneDark.js).
While all `className`s are provided with `How do I add more language highlighting support?
By default `prism-react-renderer` only includes an [arbitrary subset of the languages](https://github.com/FormidableLabs/prism-react-renderer/blob/master/src/vendor/prism/includeLangs.js) that Prism supports. You can add support for more by including their definitions from the main `prismjs` package:
```js
import Prism from "prism-react-renderer/prism";
(typeof global !== "undefined" ? global : window).Prism = Prism;
require("prismjs/components/prism-kotlin");
require("prismjs/components/prism-csharp");
```
How do I use my old Prism css themes?
`prism-react-renderer` still returns you all proper `className`s via the prop getters,
when you use it. By default however it uses its new theming system, which output a
couple of `style` props as well.
If you don't pass `theme` to the `
{highlight => null /* ... */}
```
How do I prevent a theme and the vendored Prism to be bundled?
Since the default theme and the vendored Prism library in `prism-react-renderer`
come from `defaultProps`, if you wish to pass your own Prism library in, and not
use the built-in theming, you simply need to leave it out to allow your bundler
to tree-shake those:
```js
import Highlight from "prism-react-renderer";
import Prism from "prismjs"; // Different source
{highlight => null /* ... */}
;
```
You can also import the vendored Prism library on its own:
```js
import { Prism } from "prism-react-renderer";
// or
import Prism from "prism-react-renderer/prism";
```
## LICENSE
MIT
## Maintenance Status
**Active:** Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.
[maintenance-image]: https://img.shields.io/badge/maintenance-active-green.svg