react-code-container

Install

npm install --save react-code-container

Usage

import React, { useState } from 'react';
import 'react-code-container/dist/styles/base.css';
import 'highlight.js/styles/atom-one-dark.css'; // Find any highlight style you need
import ReactCodeContainer from 'react-code-container';

export default () => {
  const [language, setLanguage] = useState('jsx');
  const [showLineNumber, setShowLineNumber] = useState(true);

  const code = `export function hello() => {
    console.log("Hello world")
  }`;
  return (
    <ReactCodeContainer
      code={code}
      showLineNumber={showLineNumber} // optional
      language={language} // optional
      onLineNumberClick={handleLineNumberClicked} // optional
    />
  );
};

Configuration

| Option | Required | Default | Description | | ------------------- | -------- | ------- | ----------------------------------------------- | | code | required | | Your code which want to display | | showLineNumber | optional | true | You can turn on / off line number | | language | optional | | Leave empty will use auto detect | | onLineNumberClick | optional | | The callback function if you clicked lineNumber |

License

MIT © Kun Yan