react-prismjs
is a React wrapper for PrismJS. The purpose of this module is to provide an easy way for developers to add syntax highlighting for code in HTML. A common use case for this is found in a blog post where you may want to share a code snippet with nice syntax highlighting.
This module uses PrismJS for syntax highlighting functionality.
Install react-prismjs
using npm
or yarn
npm install @versant-digital/react-prismjs
or
yarn add @versant-digital/react-prismjs
You can get the latest UMD build from unpkg CDN using following URLs if you are not using npm or yarn.
https://unpkg.com/@versant-digital/react-prismjs/dist/react-prismjs.js
or minified version is here
https://unpkg.com/@versant-digital/react-prismjs/dist/react-prismjs.min.js
Please note that react-prismjs
requires React 16.8.6 or above.
import React from 'react';
import ReactPrism from '@versant-digital/react-prismjs';
const code = `const message = 'test';
const sayIt = () => {
return message;
};
console.log(sayIt())`;
export const MyCode = () => {
return (
<ReactPrism language="javascript">
{code}
</ReactPrism>
);
};
react-prismjs
accepts one prop mentioned below:
Props | Comments |
---|---|
language - Required Default: javascript |
Possible values are below
|
react-prismjs
does not format your code. You are required to have proper indentation for the code. Recommended way is to copy code from a code editor so that it already has correct formatting as per your style.
Please read contribution guidelines