@pohfy/react-prism-editor NPM

React Prism Editor

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

Demo

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

npm install react-prism-editor

yarn add react-prism-editor

Usage

import ReactPrismEditor from "react-prism-editor";

<ReactPrismEditor
  language={language}
  theme={theme}
  code={code}
  lineNumber={lineNumber}
  readOnly={readOnly}
  clipboard={true}
  changeCode={code => {
    this.code = code
    console.log(code)
  }}
/>

Props

Name	Type	Default	Options	Description
code	`string`	`""`	-	the code
language	`String`	`"javascript"`	`json,javascript,jsx,tsx,typescripthtml,vue,angular,css,sass,markupjava,php,csharp,c,cpp,sql,xml,yaml`	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.

License

MIT

prismjs editor code code editor react component react prismjs

clipboard dom-iterator escape-html prismjs raw-loader unescape

@everything-registry/sub-chunk-729 @infinitebrahmanuniverse/nolb-_poh

1.1.1

3 years ago