-
-```jsx
-import React from "react";
-import { render } from "react-dom";
-// import { createRoot } from "react-dom/client";
-import Highlight, { defaultProps } from "prism-react-renderer";
-
-const exampleCode = `
-(function someDemo() {
- var test = "Hello World!";
- console.log(test);
-})();
-
-return () =>
+
+ );
+}
+`
+
+export const App = () => (
+ {item.name}
+Price: {item.price}
+Quantity: {item.quantity}
+
+
{tokens.map((line, i) => (
-
+
+ {i + 1}
{line.map((token, key) => (
-
+
))}
))}
)}
-);
-render(Content, document.getElementById('root'));
-
-// If you are using React 18
-// const root = createRoot(document.getElementById('root'));
-// root.render(Content);
-```
-
-`{highlight => /* your JSX here! */
} `
-
-### Line Numbers
-
-Add line numbers to your highlighted code blocks using the `index` parameter in your `line.map` function:
-
-
-
-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)
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
+ .render(You clicked {count} times
-
-
- );
-}
-`.trim();
-
-const Pre = styled.pre`
- text-align: left;
- margin: 1em 0;
- padding: 0.5em;
- overflow: scroll;
-`;
-
-const Line = styled.div`
- display: table-row;
-`;
-
-const LineNo = styled.span`
- display: table-cell;
- text-align: right;
- padding-right: 1em;
- user-select: none;
- opacity: 0.5;
-`;
-
-const LineContent = styled.span`
- display: table-cell;
-`;
-
-const WithLineNumbers = () => (
-
- {({ className, style, tokens, getLineProps, getTokenProps }) => (
-
- {tokens.map((line, i) => (
-
- {i + 1}
-
- {line.map((token, key) => (
-
- ))}
-
-
- ))}
-
- )}
-
-);
-
-export default WithLineNumbers;
-```
## Basic Props
@@ -235,19 +154,17 @@ This is the code that will be highlighted.
### theme
-> `PrismTheme` | _required; default is provided in `defaultProps` export_
+> `PrismTheme` | _optional; default is vsDark_
If a theme is passed, it is used to generate style props which can be retrieved
via the prop-getters which are described in "[Children Function](#children-function)".
-A default theme is provided by the `defaultProps` object.
-
Read more about how to theme `prism-react-renderer` in
the section "[Theming](#theming)".
-### Prism
+### prism
-> `PrismLib` | _required; default is provided in `defaultProps` export_
+> `prism` | _optional; default is the vendored version_
This is the [Prismjs](https://github.com/PrismJS/prism) library itself.
A vendored version of Prism is provided (and also exported) as part of this library.
@@ -263,7 +180,7 @@ But if you choose to use your own Prism setup, simply pass Prism as a prop:
// Whichever way you're retrieving Prism here:
import Prism from 'prismjs/components/prism-core';
-