react-extensible-code-viewer

A simple and extensible codeviewer component for react. See example

Install

npm install --save react-extensible-code-viewer

Usage

import React, { Component } from 'react'

import { CodeViewer } from 'react-extensible-code-viewer'
import 'react-extensible-code-viewer/dist/index.css'

const code = `const a = 2
const b = 3;
console.log(a + b)`

class Example extends Component {
  render() {
    return <CodeViewer code={code} language='javascript' />
  }
}

Customization

You can also customize the line component using the line render prop:

class Example extends Component {
  render() {
    return <CodeViewer code={code} language='javascript' line={(lineNumber, code, children) => <MyLineComponent />)} />
  }
}

You can see a working example here

License

MIT © JoseRenan