uiwjs/react-textarea-code-editor

---

# React Textarea Code Editor **`功能：`** ## 安装 ``` $ npm i @uiw/react-textarea-code-editor ``` ## 演示与文档 https://uiwjs.github.io/react-textarea-code-editor/ ## 用法 [](https://codesandbox.io/embed/summer-bush-o3qirc?fontsize=14&hidenavigation=1&theme=dark) [](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 ( setCode(evn.target.value)} padding={15} style={{ backgroundColor: "#f5f5f5", fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace', }} /> ); } ``` ## 高亮行或字符 [](https://codesandbox.io/embed/https-github-com-uiwjs-react-textarea-code-editor-issues-151-nsm7qp?fontsize=14&hidenavigation=1&theme=dark) 要使用的 [rehype 插件](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins)列表。 ``` 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 ( 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', }} /> ); } ``` ## 移除代码高亮 以下示例可以帮助你将代码高亮代码排除在 bundle 之外。`@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 ( 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 ( 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', }} /> ); } ``` ## Props ``` interface TextareaCodeEditorProps extends React.TextareaHTMLAttributes { 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., 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) => void | boolean; /** * The number of spaces for indentation when pressing tab key. Default: `2`. */ indentWidth?: number } ``` 支持的语言列表可以在[这里](https://github.com/wooorm/refractor#syntaxes)找到 ## 开发 以开发模式运行项目。 ``` # 第 1 步，首先运行，监听组件编译并输出 .js 文件 # 监听编译输出 .d.ts 类型文件 npm run watch # 第 2 步，开发模式，监听编译预览网站实例 npm run start ``` **`production`** 为生产环境构建应用至 build 文件夹。 ``` npm run build ``` 构建后的代码会进行压缩，且文件名中包含哈希值。 你的应用已准备好部署！ ## 另请参阅 - [@uiw/react-codemirror](https://github.com/uiwjs/react-codemirror)：适用于 React 的 CodeMirror 组件。 - [@uiw/react-md-editor](https://github.com/uiwjs/react-md-editor)：一个带有预览的简单 markdown 编辑器，使用 React.js 和 TypeScript 实现。 - [@uiw/react-monacoeditor](https://github.com/jaywcjlove/react-monacoeditor)：适用于 React 的 Monaco Editor 组件。 - [@uiw/react-markdown-editor](https://github.com/uiwjs/react-markdown-editor)：一个带有预览的 markdown 编辑器，使用 React.js 和 TypeScript 实现。 - [@uiw/react-markdown-preview](https://github.com/uiwjs/react-markdown-preview)：在 Web 浏览器中预览 markdown 文本的 React 组件。 ## 许可证 基于 MIT License 授权。

标签：自动化攻击