react-prism-editor

React prism editor with theme,line-numbers,copy to dashboard

Usage no npm install needed!

<script type="module">
  import reactPrismEditor from 'https://cdn.skypack.dev/react-prism-editor';
</script>

README

React Prism Editor

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

Demo

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

npm install react-prism-editor

or

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,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.

License

MIT