@versant-digital/react-prismjs v2.1.1

react-prismjs

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.

Credits

This module uses PrismJS for syntax highlighting functionality.

Installation

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.

Usage

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>
  );
};

Options

react-prismjs accepts one prop mentioned below:

Limitation

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.

Suggestions, Improvements or Reporting issues

Please read contribution guidelines