[React] react-ace 홈페이지에 코드 에디터 생성

리액트에서 홈페이지에 코드를 작성할 수 있는 코드 에디터를 생성하고 싶을 때

react-ace 패키지를 사용하면 편하게 생성할 수 있습니다.

| 설치

먼저 이런 식으로 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 className="App">
      <AceEditor mode="python" theme="twilight" />
    </div>
  );
}

이런 식으로 사용해 주면

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

 

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

<AceEditor
  mode="python" // 언어 모드
  theme="twilight" // 태마
  width="300px"
  height="600px"
  fontSize={16}
  placeholder="코드를 작성해 주세요."
  setOptions={{
    showLineNumbers: true, // 왼쪽 라인 숫자
    tabSize: 2, // 탭 사이즈
  }}
/>

 

사용할 수 있는 언어 모드의 종류

 

• javascript
• java
• python
• xml
• ruby
• sass
• markdown
• mysql
• json
• html
• handlebars
• golang
• csharp
• coffee
• css

사용할 수 있는 태마의 종류

 

• monokai
• github
• tomorrow
• kuroir
• twilight
• xcode
• textmate
• solarized dark
• solarized light
• terminal

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