react 代码编辑器-react-ace

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

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

安装：npm install react-ace ace-builds

使用：

import AceEditor from "react-ace";

import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/ext-language_tools";

function onChange(newValue) {
  console.log("change", newValue);
}

// Render editor

  <AceEditor
    mode="java"
    theme="github"
    onChange={onChange}
    name="UNIQUE_ID_OF_DIV"
    editorProps={{ $blockScrolling: true }}
  />

非常方便。

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

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

用法：

import SyntaxHighlighter from 'react-syntax-highlighter';
import { tomorrow } from 'react-syntax-highlighter/dist/esm/styles/hljs'; // 主题




<SyntaxHighlighter 
    language="yaml" // 高亮的语言我选择yaml，可以选择其他的，例如javasc等
    style={tomorrow} 
    showLineNumbers 
    customStyle={{height:'60vh',overflow:'auto'}}
>
    {logData}
</SyntaxHighlighter>

参考：react代码编辑器 react-ace_只喜欢赚钱的棉花没有糖的博客-CSDN博客