bs-react-highlight

Introduction

ReasonReact bindings for react-highlight.

State: Published

Installation

1

With yarn

yarn add @cnguy/bs-react-highlight

With npm

npm install --save @cnguy/bs-react-highlight

2

Add @cnguy/bs-react-highlight to bsconfig.json bs-dependencies.

3

Add a highlight.js theme.

For example:

<html>
<head>
  <link
    rel="stylesheet"
    type="text/css"
    href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css"
  />
</head>
<body>
  <div id="root" />
  <script src="bundle.js"></script>
</body>
</html>

Usage

Implicit:

let component = ReasonReact.statelessComponent("App");

let code = "
  function helloWorld() {
    console.log('Hello, world!')
  }
";

let make = _children => {
  ...component,
  render: _self => <Highlight> ...code </Highlight>
};

let component = ReasonReact.statelessComponent "App"
let code =
  "\n  function helloWorld() {\n    console.log('Hello, world!')\n  }\n"
let make _children =
  {
    component with
    render =
      (fun _self  -> ((Highlight.createElement ~children:code ())[@JSX ]))
  }

Explicit:

let component = ReasonReact.statelessComponent("App");

let code = "
    print(\"Hello, world!\")
  ";

let make = _children => {
  ...component,
  render: _self => <Highlight className="python"> ...code </Highlight>,
};

let component = ReasonReact.statelessComponent "App"
let code = "\n    print(\"Hello, world!\")\n  "
let make _children =
  {
    component with
    render =
      (fun _self  ->
         ((Highlight.createElement ~className:"python" ~children:code ())
         [@JSX ]))
  }

innerHTML:

let component = ReasonReact.statelessComponent("App");

let code = "
    <h1>Hello, world!</h1>
  ";

let make = _children => {
  ...component,
  render: _self => <Highlight innerHTML=true> ...code </Highlight>,
};

let component = ReasonReact.statelessComponent "App"
let code = "\n    <h1>Hello, world!</h1>\n  "
let make _children =
  {
    component with
    render =
      (fun _self  ->
         ((Highlight.createElement ~innerHTML:true ~children:code ())
         [@JSX ]))
  }

Changes

0.1.0

Release

Contributing

Development

yarn start # npm run start