https://github.com/lumia2046/react-prism-editor

https://github.com/lumia2046/react-prism-editor

Last synced: 6 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/lumia2046/react-prism-editor
• Owner: lumia2046
• Created: 2020-07-05T05:51:58.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-12-14T07:34:38.000Z (almost 2 years ago)
• Last Synced: 2024-10-29T14:19:13.134Z (15 days ago)
• Language: JavaScript
• Size: 2.95 MB
• Stars: 17
• Watchers: 2
• Forks: 11
• Open Issues: 19
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

README

        
# React Prism Editor

> A dead simple code editor with theme,syntax highlighting,line numbers.

## Demo

[react-prism-editor](https://lumia2046.github.io/react-prism-editor/)

## Features

- Theme

- Copy to dashboard

- Code Editing ^^

- Syntax highlighting

- Undo / Redo

- Copy / Paste

- The spaces/tabs of the previous line is preserved when a new line is added

- Works on mobile (thanks to contenteditable)

- Resize to parent width and height

- Support for line numbers

- Support for autosizing the editor

- Autostyling the linenumbers 

## Install

```sh

npm install react-prism-editor

```

or

```sh

yarn add react-prism-editor

```

## Usage

```js

import ReactPrismEditor from "react-prism-editor";

 {

    this.code = code

    console.log(code)

  }}

/>

```

## Props

| Name                 | Type      | Default | Options                              | Description                                      |

| -------------------- | --------- | ------- | ------------------------------------ | ------------------------------------------------ |

| code                 | `string`  | `""`    | -                                    |  the code                                        |

| language             | `String`  |`"javascript"`| `json,javascript,jsx,tsx,typescript`
`html,vue,angular,css,sass,markup`
`java,php,csharp,c,cpp,sql,xml` | language of the code |

| lineNumbers          | `Boolean` | `false` | -                                    | Whether to show line numbers or not              |

| readonly             | `Boolean` | `false` | -                                    | Indicates if the editor is read only or not      |               

| clipboard            | `Boolean` | `false` | -                                    | Whether to show clipboard or not                 |

| showLanguage         | `Boolean` | `false` | -                                    | Whether to show language or not                  |

## Events

| Name       | Parameters | Description                     |

| ---------- | ---------- | ------------------------------- |

| changeCode | `(code)`   | Fires when the code is changed. |

## Thanks

inspired by [react-live](https://github.com/FormidableLabs/react-live).

## License

MIT