react textarea code editor 다운로드 - react textarea code editor 소스 코드 다운로드

TextArea 코드 편집기에 반응합니다

구문 하이라이트가있는 간단한 코드 편집기. 이 라이브러리는 간단한 코드 편집기에 추가 기능이없는 구문 강조 지원, 사용자가 코드를 제출할 수있는 간단한 임베드 및 양식에 적합합니다.

Features:

? Dark-Mode/Night-Mode @v2 지원합니다.
☕️ 자동 구문 강조 표시.
? 새로운 라인의 자동 계약.
? 사용자 정의 가능한 들여 쓰기로 탭 키를 눌러 들여 쓰기 선 또는 선택한 텍스트.
? Parens, [] , () , <> , {} , "" , '', "", ``` ``` ````
다음 .js를 지원하고 Next.js에서 예제를 사용하십시오.

설치하다

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

데모 및 문서

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

용법

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

하이라이트 라인 또는 문자

사용할 Rehype 플러그인 목록.

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

코드 하이라이트를 제거하십시오

다음 예제는 번들에 포함되지 않도록 코드 강조 코드를 제외하는 데 도움이 될 수 있습니다. @uiw/react-textarea-code-editor/nohighlight 구성 요소에는 포함되지 않습니다 ~~rehype-prism-plus~~ 코드 강조 표시 패키지.

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

린 너브를 보여줍니다

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

다음 JS를 지원합니다

다음 JS에서 예제를 사용하십시오. #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 ;

다크 모드/야간 모드를 지원합니다

기본적으로 dark-mode 시스템에 따라 자동으로 전환됩니다. 수동으로 전환 해야하는 경우 HTML 요소의 data-color-mode="dark" 매개 변수를 설정하십시오.

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

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

.w-tc-editor-var selector를 추가하여 사용자 정의 색상 변수를 상속합니다.

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

set ( data-color-mode="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"
    />
  ) ;
}

소품

 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
}

지원되는 언어 목록은 여기에서 찾을 수 있습니다

개발

개발 모드에서 프로젝트를 실행합니다.

 # 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

빌드 폴더에 생산을위한 앱을 빌드합니다.