![Maintenance Status][maintenance-image]
Why?
Maybe you need to render some extra UI with your Prismjs-highlighted code,
or maybe you'd like to manipulate what Prism renders completely,
or maybe you're just using Prism with React and are searching for an easier,
global-pollution-free way?
Then you're right where you want to be!
How?
This library tokenises code using Prism and provides a small render-props-driven
component to quickly render it out into React. This is why it even works with
React Native! It's bundled with a modified version of Prism that won't pollute
the global namespace and comes with
a couple of common language syntaxes.
(There's also an escape-hatch to use your own Prism setup, just in case)
It also comes with its own VSCode-like theming format, which means by default
you can easily drop in different themes, use the ones this library ships with, or
create new ones programmatically on the fly.
(If you just want to use your Prism CSS-file themes, that's also no problem)
Table of Contents
Installation
This module is distributed via npm which is bundled with node and
should be installed as one of your project's dependencies:
# npm
npm install --save prism-react-renderer
# yarn
yarn add prism-react-renderer
This package also depends on
react. Please make sure you
have those installed as well.
Usage
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 () => <App />;
`;
render((
<Highlight {...defaultProps} code={exampleCode} language="jsx">
{({ className, style, tokens, getLineProps, getTokenProps }) => (
<pre className={className} style={style}>
{tokens.map((line, i) => (
<div {...getLineProps({ line, key: i })}>
{line.map((token, key) => (
<span {...getTokenProps({ token, key })} />
))}
</div>
))}
</pre>
)}
</Highlight>,
document.getElementById('root')
);
<Highlight /> is the only component exposed by this package, as inspired by
downshift.
It also exports a defaultProps object which for basic usage can simply be spread
onto the <Highlight /> component. It also provides some default theming.
It doesn't render anything itself, it just calls the render function and renders that.
"Use a render prop!"!
<Highlight>{highlight => <pre>/* your JSX here! */</pre>}</Highlight>
Basic Props
This is the list of props that you should probably know about. There are some
advanced props below as well.
Most of these advanced props are included in the defaultProps.
children
function({})