` tag, for styling.
language: string (required)
- Description: Specifies the programming language for the code to be highlighted. Refer to `prism-react-renderer` documentation for supported languages.
code: string (required)
- Description: The actual code string that needs to be highlighted.
theme: PrismTheme (optional; default is vsDark)
- Description: An object defining the theme to be used for highlighting. This theme generates style props accessible via the children function's prop-getters.
prism: prism (optional; default is the vendored version)
- Description: Allows passing a custom `Prismjs` library instance. By default, `prism-react-renderer` uses its own vendored, slimmed-down version of Prism that doesn't pollute the global namespace.
```
--------------------------------
### Basic Usage of Highlight Component
Source: https://github.com/formidablelabs/prism-react-renderer/blob/master/README.md
Demonstrates how to use the `Highlight` component from `prism-react-renderer` to render syntax-highlighted code blocks in a React application. It shows importing the component and themes, passing code and language props, and using the render prop to iterate over lines and tokens for custom rendering.
```tsx
import React from "react"
import ReactDOM from "react-dom/client"
import { Highlight, themes } from "prism-react-renderer"
import styles from 'styles.module.css'
const codeBlock = `
const GroceryItem: React.FC = ({ item }) => {
return (
{item.name}
Price: {item.price}
Quantity: {item.quantity}
);
}
`
export const App = () => (
{({ className, style, tokens, getLineProps, getTokenProps }) => (
{tokens.map((line, i) => (
{i + 1}
{line.map((token, key) => (
))}
)}
)}
)
ReactDOM
.createRoot(document.getElementById("root") as HTMLElement)
.render(
+
```
--------------------------------
### Importing Custom Prism Languages in JavaScript
Source: https://github.com/formidablelabs/prism-react-renderer/blob/master/README.md
This snippet demonstrates how to dynamically import additional language definitions for Prism, allowing `prism-react-renderer` to highlight languages not included in its default bundle. It shows both `await import()` and `require()` methods, emphasizing the need to ensure `window.Prism` is available.
```javascript
import { Highlight, Prism } from "prism-react-renderer";
(typeof global !== "undefined" ? global : window).Prism = Prism
await import("prismjs/components/prism-applescript")
/** or **/
require("prismjs/components/prism-applescript")
```
--------------------------------
### Prism React Renderer Utility Hook: useTokenize
Source: https://github.com/formidablelabs/prism-react-renderer/blob/master/README.md
A React hook that tokenizes code using the Prism library. It returns an array of token arrays, suitable for rendering with the built-in `` element.
```javascript
const ui = (
{highlight => (
// use utilities and prop getters here, like highlight.className, highlight.getTokenProps, etc.
{/* more jsx here */}
)}
);
```
--------------------------------
### Disabling Built-in Theme in Prism React Renderer
Source: https://github.com/formidablelabs/prism-react-renderer/blob/master/README.md
To use a CSS-based theme instead of a built-in one, this snippet shows how to provide an `emptyTheme` object to the `Highlight` component. This effectively disables the default theme application, allowing external CSS to control styling.
```ts
const emptyTheme = { plain: {}, styles: [] };