react 代码编辑器-react-ace

最近在做react项目，需要一个代码编辑器的功能，之前使用codemirror，发现使用起来不太好用，文档也不全，最后决定使用AceEditor

github地址：GitHub - securingsincity/react-ace: React Ace Component

安装：npm install react-ace ace-builds

使用：

1.  
   import AceEditor from "react-ace";
2.  
    
3.  
   import "ace-builds/src-noconflict/mode-java";
4.  
   import "ace-builds/src-noconflict/theme-github";
5.  
   import "ace-builds/src-noconflict/ext-language_tools";
6.  
    
7.  
   function onChange(newValue) {
8.  
   console.log("change", newValue);
9.  
   }
10.  
     
11.  
    // Render editor
12.  
     
13.  
    <AceEditor
14.  
    mode="java"
15.  
    theme="github"
16.  
    onChange={onChange}
17.  
    name="UNIQUE_ID_OF_DIV"
18.  
    editorProps={{ $blockScrolling: true }}
19.  
    />

非常方便。

如果是只要代码高亮，不需要编辑的功能，可以使用react-syntax-highlighter

github连接：https://github.com/react-syntax-highlighter/react-syntax-highlighter

用法：

1.  
   import SyntaxHighlighter from 'react-syntax-highlighter';
2.  
   import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/hljs'; // 主题
3.  
    
4.  
    
5.  
    
6.  
    
7.  
   <SyntaxHighlighter
8.  
   language="yaml" // 高亮的语言我选择yaml，可以选择其他的，例如javasc等
9.  
   style={tomorrow}
10.  
    showLineNumbers
11.  
    customStyle={{height:'60vh',overflow:'auto'}}
12.  
    >
13.  
    {logData}
14.  
    </SyntaxHighlighter>

这篇好文章是转载于：学新通技术网