bs-react-syntax-highlighter


ReasonML bindings for react-syntax-highlighter library.

Installation

``
npm i --save bs-react-syntax-highlighter react-syntax-highlighter
`

Then add bs-react-syntax-highlighter as a dependency to bsconfig.json.

Usage

Unlike in the JavaScript counterpart, there is no default highlighter - you have to choose Hljs or Prism explicitly.

`reasonml
[@react.component]
let make = () => {

{"A code to highlight"}
;
};
`

`reasonml
[@react.component]
let make = () => {
JavaScript}>
{"const foo = () => {};"}
;
};
``

$3

In JavaScript, there is a possibility to put any property you like on the root element rendered by the component,
by simply putting it on a component. It's called "props spread". react-syntax-highlighter supports that pattern as well.
ReasonML simply can't do it.

Quite nice escape hatch is wrapping the component you wish to spread props on in another
component (HOC or High-Order Component), which will inject all passed properties to its child in a not type-safe, but quite an efficient way. source. There is a runtime cost for this operation, though, so I've decided to not include such code in this library. Pay the cost only when you need to.

`reasonml
module Spread = {
[@react.component]
let make = (~props, ~children) =>
ReasonReact.cloneElement(children, ~props, [||]);
};


JavaScript}>
{"const foo = () => {};"}
;

``

For convenience I've included just one such a generic property in component bindings: className.

$3

The package provides fallback for projects using older version of JSX syntax.

`reasonml
[@react.component]
let make = () => {
JavaScript}>
...{"const foo = () => {};"}
;
};
```

Notes

An async build and a light build are not currently supported. PRs are welcome!