Unduh react textarea code editor - react textarea code editor Sumber Download

Bereaksi Editor Kode TextArea

Editor Kode Sederhana dengan Sintaks Sorot. Perpustakaan ini bertujuan untuk memberikan editor kode sederhana dengan sintaks sorot dukungan tanpa salah satu fitur tambahan, sempurna untuk embed dan formulir sederhana di mana pengguna dapat mengirimkan kode.

Features:

? Dukung mode gelap/mode malam @v2 .
☕️ Sorot Sintaks Otomatis.
? Indentasi otomatis pada jalur baru.
? Baris indentasi atau teks yang dipilih dengan menekan tombol tab, dengan indentasi yang dapat disesuaikan.
? Bungkus teks yang dipilih dalam parens, [] , () , <> , {} , "" , '' , "" , ``
Dukungan Next.js, gunakan contoh di Next.js.

Memasang

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

Demo & dokumen

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

Penggunaan

 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' ,
      } }
    />
  ) ;
}

Baris atau karakter sorotan

Daftar plugin rehype untuk digunakan.

 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' ,
      } }
    />
  ) ;
}

Hapus Sorotan Kode

Contoh berikut dapat membantu Anda mengecualikan kode penyorotan kode dari dimasukkan dalam bundel. @uiw/react-textarea-code-editor/nohighlight tidak mengandung ~~rehype-prism-plus~~ Paket Sorot Kode.

 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' ,
      } }
    />
  ) ;
}

Tampilkan linenumbers

 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' ,
      } }
    />
  ) ;
}

Dukung NextJS

Gunakan contoh di 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 ;

Mendukung mode-gelap/mode malam

Secara default, dark-mode secara otomatis diaktifkan sesuai dengan sistem. Jika Anda perlu beralih secara manual, cukup atur parameter data-color-mode="dark" untuk elemen HTML.

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

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

Mewarisi variabel warna khusus dengan menambahkan pemilih .w-tc-editor-var .

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

Set ( data-color-mode="dark" ) Tema Gelap.

 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"
    />
  ) ;
}

Alat peraga

 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
}

Daftar bahasa yang didukung dapat ditemukan di sini

Perkembangan

Menjalankan proyek dalam mode pengembangan.

 # 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

Membangun aplikasi untuk produksi ke folder build.

npm run build

Bangunan diminifikasi dan nama file termasuk hash. Aplikasi Anda siap digunakan!

Lihat juga

@uiw/react-codemirror: komponen codemirror untuk reaksi.
@UIW/React-MD-editor: Editor Markdown Sederhana dengan Pratinjau, diimplementasikan dengan React.js dan TypeScript.
@UIW/React-Monacoeditor: Komponen Editor Monako untuk Bereaksi.
@UIW/React-Markdown-Editor: Editor Markdown dengan Pratinjau, diimplementasikan dengan React.js dan TypeScript.
@UIW/React-Markdown-Preview: React Component Preview Markdown Text Di Browser Web.