react textarea code editor
v3.1.0
帶有語法突出顯示的簡單代碼編輯器。該庫旨在為一個簡單的代碼編輯器提供語法突出顯示支持，而無需任何額外功能，非常適合用戶可以提交代碼的簡單嵌入和表單。
Features:
@v2 。$ npm i @uiw/react-textarea-code-editorhttps://uiwjs.github.io/reeact-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' ,
} }
/>
) ;
} 使用的重新插件列表。
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' ,
} }
/>
) ;
} 在NextJ中使用示例。 ＃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選擇器繼承自定義顏色變量。
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
將應用程序構建到構建文件夾中。
npm run build構建被縮小，文件名包括哈希。您的應用已準備好部署！
與往常一樣，感謝我們出色的貢獻者！
由github-action-contributor製成。
根據MIT許可獲得許可。
