@uiw/react-textarea-code-editor
v3.1.0
Published
A simple code editor with syntax highlighting.
Downloads
132,601
Readme
React Textarea Code Editor
A simple code editor with syntax highlighting. This library aims to provide a simple code editor with syntax highlighting support without any of the extra features, perfect for simple embeds and forms where users can submit code.
Features:
- 🌒 Support dark-mode/night-mode
@v2
. - ☕️ Automatic syntax highlighting.
- 🐲 Automatic indent on new lines.
- 🩲 Indent line or selected text by pressing tab key, with customizable indentation.
- 🌸 Wrap selected text in parens, [], (), <>, {}, "", '', "", ``
- 💡 Support next.js, Use examples in next.js.
Install
$ npm i @uiw/react-textarea-code-editor
Demo & Document
https://uiwjs.github.io/react-textarea-code-editor/
Usage
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',
}}
/>
);
}
Highlight line or character
List of rehype plugins to use.
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',
}}
/>
);
}
Remove Code Highlight
The following example can help you exclude code highlighting code from being included in the bundle. @uiw/react-textarea-code-editor/nohighlight
component does not contain the ~~rehype-prism-plus
~~ code highlighting package.
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',
}}
/>
);
}
Show LineNumbers
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',
}}
/>
);
}
Support Nextjs
Use examples in 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;
Support dark-mode/night-mode
By default, the dark-mode
is automatically switched according to the system. If you need to switch manually, just set the data-color-mode="dark"
parameter for html Element.
<html data-color-mode="dark">
document.documentElement.setAttribute('data-color-mode', 'dark')
document.documentElement.setAttribute('data-color-mode', 'light')
Inherit custom color variables by adding .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"
) dark theme.
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"
/>
);
}
Props
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
}
List of supported languages can be found here
Development
Runs the project in development mode.
# 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
Builds the app for production to the build folder.
npm run build
The build is minified and the filenames include the hashes. Your app is ready to be deployed!
See Also
- @uiw/react-codemirror: CodeMirror component for React.
- @uiw/react-md-editor: A simple markdown editor with preview, implemented with React.js and TypeScript.
- @uiw/react-monacoeditor: Monaco Editor component for React.
- @uiw/react-markdown-editor: A markdown editor with preview, implemented with React.js and TypeScript.
- @uiw/react-markdown-preview: React component preview markdown text in web browser.
Contributors
As always, thanks to our amazing contributors!
Made with github-action-contributors.
License
Licensed under the MIT License.