react textarea code editor
v3.1.0
ตัวแก้ไขรหัสอย่างง่ายพร้อมการไฮไลต์ไวยากรณ์ ไลบรารีนี้มีจุดมุ่งหมายเพื่อให้โปรแกรมแก้ไขรหัสอย่างง่ายพร้อมการสนับสนุนการเน้นไวยากรณ์โดยไม่มีคุณสมบัติพิเศษใด ๆ เหมาะสำหรับการฝังและแบบฟอร์มที่ง่ายซึ่งผู้ใช้สามารถส่งรหัสได้
Features:
@v2$ npm i @uiw/react-textarea-code-editorhttps://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' ,
} }
/>
) ;
} ใช้ตัวอย่างใน 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 ; โดยค่าเริ่ม dark-mode จะถูกสลับโดยอัตโนมัติตามระบบ หากคุณต้องการสลับด้วยตนเองเพียงตั้งค่าพารามิเตอร์ data-color-mode="dark" สำหรับองค์ประกอบ HTML
< 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 >
)
} ตั้งค่า ( 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
สร้างแอพสำหรับการผลิตไปยังโฟลเดอร์ Build
npm run buildบิลด์มีขนาดเล็กและชื่อไฟล์รวมถึงแฮช แอพของคุณพร้อมที่จะนำไปใช้งานแล้ว!
เช่นเคยขอบคุณผู้มีส่วนร่วมที่น่าทึ่งของเรา!
ทำด้วย GitHub-Action-Contributors
ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT
