Playground is a rehype plugin and React component that allows you to create rich and interactive code examples for your documentation or web application. In addition to providing basic code rendering and highlighting,
Playground also includes several features that make it easier for users to understand and interact with the example code.
Playground, you first need to install it as a dependency in your project:
npm install rehype-playground --save-dev
As a React component
Playground as a React component, you need to import it into your project and use it in your code. Here's an example of how to use
Playground in your React code:
The Playground component takes a single child, which is the code you want to display in the example. You can include any valid JSX code as the child.
The Playground component provides several features that make it easier for users to understand and interact with the example code. Here are some of the key features:
The Playground component includes a rule that separates the example code from the rendered output.
The Playground component includes a button that allows the user to toggle the visibility of the example code.
The Playground component includes a button that allows the user to copy the example code to their clipboard.
Mobile, table, and desktop options
The Playground component provides options for displaying the example code and output in different formats depending on the device size.
The Playground component provides error handling for the example code, and displays any errors that occur during code execution.
By using the Playground component and its features, you can create engaging and interactive code examples for your documentation or web application.
import Playground from 'rehype-playground'; import Card '...' # Card The `Card` component is a simple styled div that can be used in your application. <Playground> <Card /> </Playground>