Light and fast code highlight component for React applications
- react-syntax-highlighter is used for code highlighting
- react-virtualized is used to provide fast scrolling for large files.
Import the Highlight component:
import { Highlight } from 'react-rapid-highlight'
Render the component:
<Highlight language="python" text="print(\'Hello World!\')" fontSize={12} lineHeight={0.75} rowHeight={30} theme="vsc-dark-plus" />
The following props can be passed to the Highlight component:
-
language: The language you want to highlight. A list of supported options can be found at: https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/prism.html. -
text: The code you want to highlight. This library is suited for highlighting large blocks of code, as it applies react-virtualized to highlight and render only the visible parts of the code. It must be stored in a React state. -
fontSize [Optional]: The font size of your highlighted code. -
lineHeight [Optional]: The line height of your highlighted code. -
rowHeight [Optional]: The height of each line of highlighted code. -
theme [Optional]: The theme style of the highlighted code. A list of supported options can be found at: https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/prism.html.