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 تلقائيًا وفقًا للنظام. إذا كنت بحاجة إلى التبديل يدويًا ، فما عليك سوى تعيين المعلمة data-color-mode="dark" لعنصر HTML.
< 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" ) dark shown.
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-contributors.
مرخصة بموجب ترخيص معهد ماساتشوستس للتكنولوجيا.
