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システムに応じて自動的に切り替えられます。手動で切り替える必要がある場合は、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
Buildフォルダーへの生産用のアプリをビルドします。
npm run buildビルドが縮小され、ファイル名にはハッシュが含まれます。あなたのアプリは展開する準備ができています！
いつものように、私たちの素晴らしい貢献者に感謝します！
Github-action-contributorsで作られています。
MITライセンスに基づいてライセンスされています。
