Nocturnal Parakeet Monitor

    bs-react-syntax-highlighter

    0.3.0 • Public • Published

    bs-react-syntax-highlighter

    Build Status dependencies Status devDependencies Status peerDependencies Status Greenkeeper badge

    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.

    [@react.component]
    let make = () => {
      <ReactSyntaxHighlighter.Prism style={ReactSyntaxHighlighter.Prism.Style.darcula}>
        {"A code to highlight"}
      </ReactSyntaxHighlighter.Prism>;
    };
    [@react.component]
    let make = () => {
      <ReactSyntaxHighlighter.Hljs language={`JavaScript}>
        {"const foo = () => {};"}
      </ReactSyntaxHighlighter.Hljs>;
    };

    Props spread

    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.

    module Spread = {
      [@react.component]
      let make = (~props, ~children) =>
        ReasonReact.cloneElement(children, ~props, [||]);
    };
     
    <Spread props={"id": "foobar"}>
      <ReactSyntaxHighlighter.Hljs language={`JavaScript}>
        {"const foo = () => {};"}
      </ReactSyntaxHighlighter.Hljs>;
    </Spread>

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

    JSX 2

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

    [@react.component]
    let make = () => {
      <ReactSyntaxHighlighter.Hljs.Jsx2 language={`JavaScript}>
        ...{"const foo = () => {};"}
      </ReactSyntaxHighlighter.Hljs.Jsx2>;
    };

    Notes

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

    Install

    npm i bs-react-syntax-highlighter

    DownloadsWeekly Downloads

    7

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    36.2 kB

    Total Files

    13

    Last publish

    Collaborators

    • erykpiast