[![Maintenance Status][maintenance-image]](#maintenance-status)

> This is a fork of prism-react-renderer with hooks like useHighlight.

prism-react-renderer 🖌️

A lean Prism highlighter component for React

Comes with everything to render Prismjs highlighted code directly to React (Native) elements, global-pollution-free!

Why?

Maybe you need to render some extra UI with your Prismjs-highlighted code,
or maybe you'd like to manipulate what Prism renders completely,
or maybe you're just using Prism with React and are searching for an easier,
global-pollution-free way?

Then you're right where you want to be!

How?

This library tokenises code using Prism and provides two ways - a hook and a small render-props-driven
component to quickly render it out into React. This is why it even works with
React Native! It's bundled with a modified version of Prism that won't pollute
the global namespace and comes with
a couple of common language syntaxes.

_(There's also an escape-hatch to use your own Prism setup, just in case)_

It also comes with its own VSCode-like theming format, which means by default
you can easily drop in different themes, use the ones this library ships with, or
create new ones programmatically on the fly.

_(If you just want to use your Prism CSS-file themes, that's also no problem)_

- Installation
- Usage
- Using component
- Using hooks
- DefaultRenderer
- Basic Props
- children
- language
- code
- Advanced Props
- theme
- Prism
- Children Function
- state
- prop getters
- getLineProps
- getTokenProps
- Theming
- FAQ
- LICENSE

Installation

This module is distributed via npm which is bundled with node and
should be installed as one of your project's dependencies:

``

sh

npm

npm install --save @bendtherules/prism-react-renderer

yarn

yarn add @bendtherules/prism-react-renderer





> This package also depends on

react

. Please make sure you

> have those installed as well.



Usage



> Try it out in the browser







$3

jsx

import React from "react";

import { render } from "react-dom";

import Highlight, { defaultProps } from "prism-react-renderer";



const exampleCode =

(function someDemo() {
var test = "Hello World!";
console.log(test);
})();

return () => ;

;



render(

  

    {({ className, style, tokens, getLineProps, getTokenProps }) => (

      
        {tokens.map((line, i) => (

          

            {line.map((token, key) => (

              

            ))}

          

        ))}

      

    )}

  ,

  document.getElementById('root')

);

 is the main component exposed by this package, as inspired by

downshift.



It also exports a

defaultProps

 object which for basic usage can simply be spread

onto the

component or useHighlight

 hook. It also provides some default theming.



It doesn't render anything itself, it just calls the render function and renders that.

"Use a render prop!"!

{highlight =>

/ your JSX here! /

}

$3

jsx

import React from "react";

import { render } from "react-dom";

import { useHighlight, defaultProps } from "@bendtherules/prism-react-renderer";



const exampleCode =

(function someDemo() {
var test = "Hello World!";
console.log(test);
})();

return () => ;

;



function HighlightConsumer() {

  const {

    className,

    style,

    tokens,

    getLineProps,

    getTokenProps,

  } = useHighlight({

    ...defaultProps,

    code: exampleCode,

    language: "jsx",

  });



  return (

    
      {tokens.map((line, i) => (

        

          {line.map((token, key) => (

            

          ))}

        

      ))}

    

  );

}



render((

  ,

  document.getElementById('root')

);





$3



You'll very likely end up changing the rendering logic to suit your usecase, but this is just a convenient component to reuse the default rendering logic seen above.  

(To be honest, it also helps in testing within the package)



So, if you want to write the above code examples in a shorter way (but without any customization), you can use -

jsx

import React from "react";

import { render } from "react-dom";

import Highlight, {DefaultRenderer, useHighlight, defaultProps } from "prism-react-renderer";



// 1. using component -



render(

  

    {(input) => (

      

    )}

  ,

  document.getElementById('root')

);





// 2. Or, using hooks -



function SomeComponent() {

  const input = useHighlight({

    ...defaultProps,

    code: exampleCode,

    language: "jsx",

  });



  return  

}



render(, document.getElementById('root'));





$3



Add line numbers to your highlighted code blocks using the

index parameter in your line.map

 function:







For example, if you were using

styled-components

, it could look like the following demo.



> Demo with

styled-components

js

import React from "react";

import styled from "styled-components";

import Highlight, { defaultProps } from "prism-react-renderer";

import theme from "prism-react-renderer/themes/nightOwl";



const exampleCode =

import React, { useState } from "react";

function Example() {
const [count, setCount] = useState(0);

return (

You clicked {count} times

);
}

.trim();



const Pre = styled.pre

text-align: left;
margin: 1em 0;
padding: 0.5em;
overflow: scroll;

;



const Line = styled.div

display: table-row;

;



const LineNo = styled.span

display: table-cell;
text-align: right;
padding-right: 1em;
user-select: none;
opacity: 0.5;

;



const LineContent = styled.span

display: table-cell;

;



const WithLineNumbers = () => (

  

    {({ className, style, tokens, getLineProps, getTokenProps }) => (

      
        {tokens.map((line, i) => (

          

            {i + 1}

            

              {line.map((token, key) => (

                

              ))}

            

          

        ))}

      

    )}

  

);



export default WithLineNumbers;





Basic Props



This is the list of props that you should probably know about. There are some

advanced props below as well.



Most of these advanced props are included in the

defaultProps

.



$3



>

function({})

 | _required_



This is called with an object. Read more about the properties of this object in

the section "Children Function".



$3



>

string

 | _required_



This is the language that your code will be highlighted as. You can see a list

of all languages that are supported out of the box here. Not all languages are included and the list of languages that are currently is a little arbitrary. You can use the escape-hatch to use your own Prism setup, just in case, or add more languages to the bundled Prism.



$3



>

string

 | _required_



This is the code that will be highlighted.



Advanced Props



$3



>

PrismTheme | _required; default is provided in defaultProps

 export_



If a theme is passed, it is used to generate style props which can be retrieved

via the prop-getters which are described in "Children Function".



A default theme is provided by the

defaultProps

 object.



Read more about how to theme

react-prism-renderer

 in

the section "Theming".



$3



>

PrismLib | _required; default is provided in defaultProps

 export_



This is the Prismjs library itself.

A vendored version of Prism is provided (and also exported) as part of this library.

This vendored version doesn't pollute the global namespace, is slimmed down,

and doesn't conflict with any installation of

prismjs

 you might have.



If you're only using

Prism.highlight you can choose to use prism-react-renderer

's

exported, vendored version of Prism instead.



But if you choose to use your own Prism setup, simply pass Prism as a prop:

jsx

// Whichever way you're retrieving Prism here:

import Prism from 'prismjs/components/prism-core';



 ... /} />





Children Function



This is where you render whatever you want to based on the output of

.

You use it like so:

js

const ui = (

  

    {highlight => (

      // use utilities and prop getters here, like highlight.className, highlight.getTokenProps, etc.

      {/ more jsx here /}

    )}

  

);





The properties of this

highlight

 object can be split into two categories as indicated below:



$3



These properties are the flat output of

. They're generally "state" and are what

you'd usually expect from a render-props-based API.



| property    | type        | description                                                                                                                  |

| ----------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------- |

|

tokens | Token[][]

 | This is a doubly nested array of tokens. The outer array is for separate lines, the inner for tokens, so the actual content. |

|

className | string | This is the class you should apply to your wrapping element, typically a

                                             |



A "Token" is an object that represents a piece of content for Prism. It has a types property, which is an array

of types that indicate the purpose and styling of a piece of text, and a content property, which is the actual

text.



You'd typically iterate over tokens, rendering each line, and iterate over its items, rendering out each token, which is a piece of

this line.



$3



> See

> Kent C. Dodds' blog post about prop getters



These functions are used to apply props to the elements that you render. This

gives you maximum flexibility to render what, when, and wherever you like.



You'd typically call these functions with some dictated input and add on all other

props that it should pass through. It'll correctly override and modify the props

that it returns to you, so passing props to it instead of adding them directly is

advisable.



| property        | type           | description                                                                                           |

| --------------- | -------------- | ----------------------------------------------------------------------------------------------------- |

| getLineProps  | function({}) | returns the props you should apply to any list of tokens, i.e. the element that contains your tokens. |

| getTokenProps | function({}) | returns the props you should apply to the elements displaying tokens that you render.                 |



#### getLineProps



You need to add a line property (type: Token[]) to the object you're passing to

getLineProps; It's also advisable to add a key.



This getter will return you props to spread onto your line elements (typically s).



It will typically return a className (if you pass one it'll be appended), children,

style (if you pass one it'll be merged). It also passes on all other props you pass

to the input.



The className will always contain .token-line.



#### getTokenProps



You need to add a token property (type: Token) to the object you're passing to

getTokenProps; It's also advisable to add a key.



This getter will return you props to spread onto your token elements (typically s).



It will typically return a className (if you pass one it'll be appended), children,

style (if you pass one it'll be merged). It also passes on all other props you pass

to the input.



The className will always contain .token. This also provides full compatibility with

your old Prism CSS-file themes.



Theming



The defaultProps you'd typically apply in a basic use-case, contain a default theme.

This theme is duotoneDark.



While all classNames are provided with , so that you could use your good

old Prism CSS-file themes, you can also choose to use react-prism-renderer's themes like so:



`jsx

import dracula from 'prism-react-renderer/themes/dracula';



 ... /} />

`



These themes are JSON-based and are heavily inspired by VSCode's theme format.



Their syntax, expressed in Flow looks like the following:



`js

{

  plain: StyleObj,

  styles: Array<{

    types: string[],

    languages?: string[],

    style: StyleObj

  }>

}

`



The plain property provides a base style-object. This style object is directly used

in the style props that you'll receive from the prop getters, if a theme prop has

been passed to .



The styles property contains an array of definitions. Each definition contains a style

property, that is also just a style object. These styles are limited by the types

and languages properties.



The types properties is an array of token types that Prism outputs. The languages

property limits styles to highlighted languages.



When converting a Prism CSS theme it's mostly just necessary to use classes as

types and convert the declarations to object-style-syntax and put them on style.



FAQ







How do I add more language highlighting support?



By default prism-react-renderer only includes an arbitrary subset of the languages that Prism supports. You can add support for more by including their definitions from the main prismjs package:



`js

import Prism from "prism-react-renderer/prism";



(typeof global !== "undefined" ? global : window).Prism = Prism;



require("prismjs/components/prism-kotlin");

require("prismjs/components/prism-csharp");

`









How do I use my old Prism css themes?



prism-react-renderer still returns you all proper classNames via the prop getters,

when you use it. By default however it uses its new theming system, which output a

couple of style props as well.



If you don't pass theme to the  component it will default to not

outputting any style props, while still returning you the className props, like

so:



`js

  {...defaultProps}

  code={exampleCode}

  language="jsx"

  theme={undefined}

>

  {highlight => null / ... /}



`











How do I prevent a theme and the vendored Prism to be bundled?



Since the default theme and the vendored Prism library in prism-react-renderer

come from defaultProps, if you wish to pass your own Prism library in, and not

use the built-in theming, you simply need to leave it out to allow your bundler

to tree-shake those:



`js

import Highlight from "prism-react-renderer";

import Prism from "prismjs"; // Different source





  {highlight => null / ... /}

;

`



You can also import the vendored Prism library on its own:



`js

import { Prism } from "prism-react-renderer";

// or

import Prism from "prism-react-renderer/prism";

``







LICENSE



MIT



Maintenance Status



Active: Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.



[maintenance-image]: https://img.shields.io/badge/maintenance-active-green.svg

@bendtherules/prism-react-renderer

prism-react-renderer 🖌️

Why?

How?

Table of Contents

Installation

npm

yarn

Usage

$3

$3

$3

$3

Basic Props

$3

$3

$3

Advanced Props

$3

$3

Children Function

$3

$3

Theming

FAQ

LICENSE

Maintenance Status