A React component for highlighting code with Prism


701.0.14 years ago4 years agoMinified + gzip package size for @maji/react-prism in KB



A React component for highlighting code with Prism.


This component does not bundle Prism; you have to include it in your project. To install both Prism and this component, run:

$ yarn add prismjs @maji/react-prism


A simple example of highlighting some javascript:

import Prism from '@maji/react-prism'

const App = (
  <div className='app'>
    <Prism language='javascript'>
        // your code goes here...
        var foo = 'bar'

A more complete example is in example/app.js.

NOTE: you will also need to include Prism's CSS. When installed with npm, its stylesheets are at node_modules/prismjs/themes/*.css.

NOTE x 2: to support languages other than JavaScript, you'll have to manually import the language from Prism. For example, to add Bash support, do import 'prismjs/components/prism-bash'.



If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.