A lean Prism highlighter component for React
Comes with everything to render Prismjs highlighted code directly to React (Native) elements, global-pollution-free!
Price: {item.price}
Quantity: {item.quantity}
{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.
## Utility Functions
### `useTokenize`
> `(options: TokenizeOptions) => Token[][]`
```ts
type TokenizeOptions = {
prism: PrismLib
code: string
grammar?: PrismGrammar
language: Language
}
```
This is a React hook that tokenizes code using Prism. It returns an array of tokens that can be rendered using the built-in `