\n A lean Prism highlighter component for React
\n Comes with everything to render Prismjs highlighted code directly to React (Native) elements, global-pollution-free!\n
![\"Screenshot](\"./.readme/basic.png\")
\n\n```jsx\nimport React from \"react\";\nimport { render } from \"react-dom\";\nimport Highlight, { defaultProps } from \"prism-react-renderer\";\n\nconst exampleCode = `\n(function someDemo() {\n var test = \"Hello World!\";\n console.log(test);\n})();\n\nreturn () => \n {tokens.map((line, i) => (\n \n {line.map((token, key) => (\n \n ))}\n \n ))}\n \n )}\n /* your JSX here! */}
![\"Screenshot](\"./.readme/line-numbers.png\")
\n\nFor example, if you were using `styled-components`, it could look like the following demo.\n\n> [Demo with `styled-components`](https://codesandbox.io/s/prism-react-renderer-example-u6vhk?file=/src/WithLineNumbers.js)\n\n```js\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport Highlight, { defaultProps } from \"prism-react-renderer\";\nimport theme from \"prism-react-renderer/themes/nightOwl\";\n\nconst exampleCode = `\nimport React, { useState } from \"react\";\n\nfunction Example() {\n const [count, setCount] = useState(0);\n\n return (\n You clicked {count} times
\n \n\n {tokens.map((line, i) => (\n \n {i + 1} \n \n {line.map((token, key) => (\n \n ))}\n \n \n ))}\n \n )}\n {/* more jsx here */}\n )}\n ` |\n\nA \"Token\" is an object that represents a piece of content for Prism. It has a `types` property, which is an array\nof types that indicate the purpose and styling of a piece of text, and a `content` property, which is the actual\ntext.\n\nYou'd typically iterate over `tokens`, rendering each line, and iterate over its items, rendering out each token, which is a piece of\nthis line.\n\n### prop getters\n\n> See\n> [Kent C. Dodds' blog post about prop getters](https://blog.kentcdodds.com/how-to-give-rendering-control-to-users-with-prop-getters-549eaef76acf)\n\nThese functions are used to apply props to the elements that you render. This\ngives you maximum flexibility to render what, when, and wherever you like.\n\nYou'd typically call these functions with some dictated input and add on all other\nprops that it should pass through. It'll correctly override and modify the props\nthat it returns to you, so passing props to it instead of adding them directly is\nadvisable.\n\n| property | type | description |\n| --------------- | -------------- | ----------------------------------------------------------------------------------------------------- |\n| `getLineProps` | `function({})` | returns the props you should apply to any list of tokens, i.e. the element that contains your tokens. |\n| `getTokenProps` | `function({})` | returns the props you should apply to the elements displaying tokens that you render. |\n\n#### `getLineProps`\n\nYou need to add a `line` property (type: `Token[]`) to the object you're passing to\n`getLineProps`; It's also advisable to add a `key`.\n\nThis getter will return you props to spread onto your line elements (typically `s`).\n\nIt will typically return a `className` (if you pass one it'll be appended), `children`,\n`style` (if you pass one it'll be merged). It also passes on all other props you pass\nto the input.\n\nThe `className` will always contain `.token-line`.\n\n#### `getTokenProps`\n\nYou need to add a `token` property (type: `Token`) to the object you're passing to\n`getTokenProps`; It's also advisable to add a `key`.\n\nThis getter will return you props to spread onto your token elements (typically `s`).\n\nIt will typically return a `className` (if you pass one it'll be appended), `children`,\n`style` (if you pass one it'll be merged). It also passes on all other props you pass\nto the input.\n\nThe `className` will always contain `.token`. This also provides full compatibility with\nyour old Prism CSS-file themes.\n\n## Theming\n\nThe `defaultProps` you'd typically apply in a basic use-case, contain a default theme.\nThis theme is [duotoneDark](./src/themes/duotoneDark.js).\n\nWhile all `className`s are provided with `How do I add more language highlighting support?
\n\nBy 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:\n\n```js\nimport Prism from \"prism-react-renderer/prism\";\n\n(typeof global !== \"undefined\" ? global : window).Prism = Prism;\n\nrequire(\"prismjs/components/prism-kotlin\");\nrequire(\"prismjs/components/prism-csharp\");\n```\n\n\n\n\nHow do I use my old Prism css themes?
\n\n`prism-react-renderer` still returns you all proper `className`s via the prop getters,\nwhen you use it. By default however it uses its new theming system, which output a\ncouple of `style` props as well.\n\nIf you don't pass `theme` to the `\n {highlight => null /* ... */}\n\n```\n\n \n\n\n\nHow do I prevent a theme and the vendored Prism to be bundled?
\n\nSince the default theme and the vendored Prism library in `prism-react-renderer`\ncome from `defaultProps`, if you wish to pass your own Prism library in, and not\nuse the built-in theming, you simply need to leave it out to allow your bundler\nto tree-shake those:\n\n```js\nimport Highlight from \"prism-react-renderer\";\nimport Prism from \"prismjs\"; // Different source\n\n\n {highlight => null /* ... */}\n ;\n```\n\nYou can also import the vendored Prism library on its own:\n\n```js\nimport { Prism } from \"prism-react-renderer\";\n// or\nimport Prism from \"prism-react-renderer/prism\";\n```\n\n\n\n## LICENSE\n\nMIT\n\n## Maintenance Status\n\n**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.\n\n[maintenance-image]: https://img.shields.io/badge/maintenance-active-green.svg"
}