react textarea code editor Download - react textarea code editor Téléchargement du code source

React TextArea Code Editor

Un éditeur de code simple avec la syntaxe en surbrillance. Cette bibliothèque vise à fournir un éditeur de code simple avec la syntaxe mettant en évidence la prise en charge sans aucune des fonctionnalités supplémentaires, parfaite pour des intégres et des formulaires simples où les utilisateurs peuvent soumettre du code.

Features:

? Prise en charge du mode noir / mode nocturne @v2 .
☕️ Syntaxe automatique mettant en évidence.
? INDENT AUTOMATIQUE SUR LES NOUVELLES LIGNES.
? Ligne d'attente ou texte sélectionné en appuyant sur la touche Tab, avec une indentation personnalisable.
? Enveloppez le texte sélectionné dans parens, [] , () , <> , {} , "" , '' , "" , ``
Prise en charge de next.js, utilisez des exemples dans next.js.

Installer

$ npm i @uiw/react-textarea-code-editor

Démo et document

https://uiwjs.github.io/react-textarea-code-editor/

Usage

 import React , { useState } from "react" ;
import CodeEditor from '@uiw/react-textarea-code-editor' ;

export default function App ( ) {
  const [ code , setCode ] = useState (
    `function add(a, b) {n  return a + b;n}`
  ) ;
  return (
    < CodeEditor
      value = { code }
      language = "js"
      placeholder = "Please enter JS code."
      onChange = { ( evn ) => setCode ( evn . target . value ) }
      padding = { 15 }
      style = { {
        backgroundColor : "#f5f5f5" ,
        fontFamily : 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace' ,
      } }
    />
  ) ;
}

Ligne de surbrillance ou caractère

Liste des plugins de réhype à utiliser.

 import CodeEditor from '@uiw/react-textarea-code-editor' ;
import rehypePrism from "rehype-prism-plus" ;
import rehypeRewrite from "rehype-rewrite" ;
import "./styles.css" ;

function App ( ) {
  const [ code , setCode ] = React . useState (
    `function add(a, b) {n  return a + b;n}`
  ) ;
  return (
    < CodeEditor
      value = { code }
      language = "js"
      placeholder = "Please enter JS code."
      onChange = { ( evn ) => setCode ( evn . target . value ) }
      padding = { 15 }
      rehypePlugins = { [
        [ rehypePrism , { ignoreMissing : true } ] ,
        [
          rehypeRewrite ,
          {
            rewrite : ( node , index , parent ) => {
              if ( node . properties ?. className ?. includes ( "code-line" ) ) {
                if ( index === 0 && node . properties ?. className ) {
                  node . properties . className . push ( "demo01" ) ;
                  // console.log("~~~", index, node.properties?.className);
                }
              }
              if ( node . type === "text" && node . value === "return" && parent . children . length === 1 ) {
                parent . properties . className . push ( "demo123" ) ;
              }
            }
          }
        ]
      ] }
      style = { {
        fontSize : 12 ,
        backgroundColor : "#f5f5f5" ,
        fontFamily : 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace' ,
      } }
    />
  ) ;
}

Supprimer le code survient

L'exemple suivant peut vous aider à exclure le code de la mise en évidence du code par le fait d'être inclus dans le bundle. @uiw/react-textarea-code-editor/nohighlight composant ne contient pas le ~~rehype-prism-plus~~ Package de mise en surbrillance du code.

 import React , { useState } from "react" ;
import CodeEditor from '@uiw/react-textarea-code-editor/nohighlight' ;

export default function App ( ) {
  const [ code , setCode ] = useState (
    `function add(a, b) {n  return a + b;n}`
  ) ;
  return (
    < CodeEditor
      value = { code }
      language = "js"
      placeholder = "Please enter JS code."
      onChange = { ( evn ) => setCode ( evn . target . value ) }
      padding = { 15 }
      style = { {
        backgroundColor : "#f5f5f5" ,
        fontFamily : 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace' ,
      } }
    />
  ) ;
}

Montrer des linous

 import rehypePrism from 'rehype-prism-plus' ;
import React , { useState } from "react" ;
import CodeEditor from '@uiw/react-textarea-code-editor' ;

export default function App ( ) {
  const [ code , setCode ] = useState (
    `function add(a, b) {n  return a + b;n}`
  ) ;
  return (
    < CodeEditor
      value = { code }
      language = "js"
      placeholder = "Please enter JS code."
      onChange = { ( evn ) => setCode ( evn . target . value ) }
      rehypePlugins = { [
        [ rehypePrism , { ignoreMissing : true , showLineNumbers : true } ]
      ] }
      style = { {
        backgroundColor : "#f5f5f5" ,
        fontFamily : 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace' ,
      } }
    />
  ) ;
}

Soutenir NextJS

Utilisez des exemples dans NextJS. # 31

npm install next-remove-imports
npm install @uiw/[email protected]

 // next.config.js
const removeImports = require ( "next-remove-imports" ) ( ) ;
module . exports = removeImports ( {
  experimental : { esmExternals : true }
} ) ;

 import React from "react" ;
import dynamic from "next/dynamic" ;
import "@uiw/react-textarea-code-editor/dist.css" ;

const CodeEditor = dynamic (
  ( ) => import ( "@uiw/react-textarea-code-editor" ) . then ( ( mod ) => mod . default ) ,
  { ssr : false }
) ;

function HomePage ( ) {
  const [ code , setCode ] = React . useState (
    `function add(a, b) {n  return a + b;n}`
  ) ;
  return (
    < div >
      < CodeEditor
        value = { code }
        language = "js"
        placeholder = "Please enter JS code."
        onChange = { ( evn ) => setCode ( evn . target . value ) }
        padding = { 15 }
        style = { {
          fontSize : 12 ,
          backgroundColor : "#f5f5f5" ,
          fontFamily :
            "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace"
        } }
      />
    </ div >
  ) ;
}

export default HomePage ;

Prise en charge du mode noir / en mode nocturne

Par défaut, le dark-mode est automatiquement commuté en fonction du système. Si vous devez changer manuellement, définissez simplement le paramètre data-color-mode="dark" pour l'élément HTML.

 < html data-color-mode =" dark " >

 document . documentElement . setAttribute ( 'data-color-mode' , 'dark' )
document . documentElement . setAttribute ( 'data-color-mode' , 'light' )

Hériter des variables de couleur personnalisées en ajoutant le sélecteur .w-tc-editor-var .

 const Demo = ( ) => {
  return (
    < div >
      < div className = "w-tc-editor-var" > </ div >
      < CodeEditor value = { code } />
    </ div >
  )
}

SET ( data-color-mode="dark" ) THÈME DARK.

 import CodeEditor from '@uiw/react-textarea-code-editor' ;

function App ( ) {
  return (
    < CodeEditor
      value = "function add(a, b) {n  return a + b;n}"
      data-color-mode = "dark"
    />
  ) ;
}

Accessoires

 interface TextareaCodeEditorProps extends React . TextareaHTMLAttributes < HTMLTextAreaElement > {
  prefixCls ?: string ;
  /**
   * Support dark-mode/night-mode
   */
  [ 'data-color-mode' ] ?: 'dark' | 'light' ;
  /**
   * Set what programming language the code belongs to.
   */
  language ?: string ;
  /**
   * Optional padding for code. Default: `10`.
   */
  padding ?: number ;
  /**
   * rehypePlugins (Array.<Plugin>, default: `[[rehypePrism, { ignoreMissing: true }]]`)  
   * List of [rehype plugins](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins) to use. See the next section for examples on how to pass options
   */
  rehypePlugins ?: PluggableList ;
  /**
   * The minimum height of the editor. Default: `16`.
   */
  minHeight ?: number ;
  onKeyDown ?: ( event : React . KeyboardEvent < HTMLTextAreaElement > ) => void | boolean ;
  /**
   * The number of spaces for indentation when pressing tab key. Default: `2`.
   */
  indentWidth ?: number
}

La liste des langues prises en charge peut être trouvée ici

Développement

Exécute le projet en mode développement.

 # Step 1, run first, listen to the component compile and output the .js file
# listen for compilation output type .d.ts file
npm run watch
# Step 2, development mode, listen to compile preview website instance
npm run start

production

Créez l'application pour la production dans le dossier de construction.

npm run build

La construction est minifiée et les noms de fichiers incluent les hachages. Votre application est prête à être déployée!

Voir aussi

@ UIW / React-CodeMirror: CodeMirror Composant pour React.
@ uiw / react-md-editor: un simple éditeur Markdown avec aperçu, implémenté avec react.js et dactylographe.
@ uiw / react-monacoeditor: composant de l'éditeur Monaco pour React.
@ UIW / React-Markdown-Editor: un éditeur de Markdown avec prévisualisation, implémenté avec react.js et typescript.
@ uiw / react-markdown-preview: réagir le texte de marque de prévisualisation des composants dans le navigateur Web.