| 설치

먼저 이런 식으로 react-ace 패키지를 설치해 줍니다.

npm install react-ace ace-builds

| 사용

import AceEditor from "react-ace";

import "ace-builds/src-noconflict/mode-python"; // 언어를 바꾸려면 python 부분 바꾸면 됨

import "ace-builds/src-noconflict/theme-twilight"; // 태마를 바꾸려면 twilight 부분 바꾸면 됨

이런 식으로 사용하려 하는 언어와 태마 그리고 에디터를 임포트 해 온다음

function App() {

return (

</div>

);

}

이런 식으로 사용해 주면

홈페이지에 이런 식으로 자동완성 되는 코드에디터가 생깁니다.

또한 아래의 코드처럼 스타일을 적용할 수도 있습니다.

<AceEditor

mode="python" // 언어 모드

theme="twilight" // 태마

width="300px"

height="600px"

fontSize={16}

placeholder="코드를 작성해 주세요."

setOptions={{

showLineNumbers: true, // 왼쪽 라인 숫자

tabSize: 2, // 탭 사이즈

}}

/>

위의 언어 모드와 태마를 참고해서 사용하면 끝