Enhance your React-Notion-X projects with a versatile code block component. This component offers out-of-the-box support for multiple programming languages and automatically adapts to light and dark themes, powered by Shiki.
You can install the react-notion-x-code-block package using npm, yarn, or pnpm:
npm install react-notion-x-code-block yarn add react-notion-x-code-block pnpm install react-notion-x-code-block
To use the component, import Code from the package and include it in your NotionRenderer components object:
import { Code } from "react-notion-x-code-block"; import { NotionRenderer } from "react-notion-x"; <NotionRenderer // ... components={{ Code }} />;
To ensure the code block styles automatically adjust to your theme mode (light or dark), define CSS style according to the method you use to achieve dark mode.
/* file: style.css */ @media (prefers-color-scheme: dark) { .shiki, .shiki span { color: var(--shiki-dark) !important; background-color: var(--shiki-dark-bg) !important; /* Optional, if you also want font styles */ font-style: var(--shiki-dark-font-style) !important; font-weight: var(--shiki-dark-font-weight) !important; text-decoration: var(--shiki-dark-text-decoration) !important; } }
Class-based Dark Mode
/* file: style.css */ html.dark .shiki, html.dark .shiki span { color: var(--shiki-dark) !important; background-color: var(--shiki-dark-bg) !important; /* Optional, if you also want font styles */ font-style: var(--shiki-dark-font-style) !important; font-weight: var(--shiki-dark-font-weight) !important; text-decoration: var(--shiki-dark-text-decoration) !important; }
And then import it to the page:
import { Code } from "react-notion-x-code-block"; import { NotionRenderer } from "react-notion-x"; import "./style.css"; <NotionRenderer // ... components={{ Code }} />;
Since NotionRenderer will only accept react components as props, we need to wrapper Code component and set specific settings.
Specific theme
import { type CodeBlock, ExtendedRecordMap } from "notion-types"; import { Code } from "react-notion-x-code-block"; function PersonalizedCode({ block }: { block: CodeBlock }) { return ( <Code block={block} themes={{ light: "material-theme-lighter", dark: "material-theme-ocean" }} /> ); }
Hide copy code button
import { type CodeBlock, ExtendedRecordMap } from "notion-types"; import { Code } from "react-notion-x-code-block"; function PersonalizedCode({ block }: { block: CodeBlock }) { return <Code block={block} showCopy={false} />; }
| Property | Description | Type | Default |
|---|---|---|---|
| block | Receives render code content from NotionRenderer |
CodeBlock | - |
| className | Additional class for Code | string | - |
| defaultLanguage | Default programming language if not specified in block |
string | typescript |
| themes | Themes for rendering code | object | {light: "catppuccin-latte", dark: "dracula"} |
| IntersectionObserverOptions | Manage the conditions under which the highlighting of a code block should be triggered (Need lazyLoading property to be true) |
object | {rootMargin: "0px",threshold: 0.1} |
| showCopy | Whether to show the copy button on the top right corner | boolean | true |
| showLangLabel | Whether to show the language type label on the top left corner | boolean | true |
| lazyLoading | Whether to run highlighting rendering when a code block is within viewport | boolean | true |
- Install dependencies
pnpm i - Build the package by running
pnpm build. - Navigate to the example package directory with
cd example. - Start the example application using
pnpm dev. - Open your web browser and go to http://localhost:5173 to view the application.
- Execute the command
pnpm watch. This initiates continuous monitoring of file modifications, enabling automatic compilation. - Navigate to the example folder and execute
pnpm dev. This starts the Vite React project, which automatically refreshes upon any changes made in the main packages.