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许可获得许可。
