ReactQuill + highlight.js(코드 블록)로 게시물의 코드 영역 구분하기

https://sakuraop.tistory.com/614 에서 이어집니다.

( 안 봐도 상관 없습니다. 이미 quill은 만들고 나서 highlight 적용 방법을 찾는 것이기 때문에... )

목차

1. highlight.js 설치

2. ReactQuill 에 highlight.js 적용

3. Custom Toolbar에 적용

---

1. highlight.js 설치하기

블로그 게시물의 본문에는 코드도 올라갈 것이기 때문에 일반 글과 코드 영역을 구분해야겠죠.

highlight.js 를 설치하고 ReactQuill에 적용시켜 보겠습니다.

코드를 감지하여 아래와 같이 코드를 읽기 쉽도록 도와주는 라이브러입니다.

 

https://www.npmjs.com/package/highlight.js?activeTab=readme

highlight.js

npm i highlight.js

 

2. ReactQuill 에 highlight.js 적용

https://quilljs.com/docs/modules/syntax/

Syntax Highlighter Module - Quill

// editorModule.ts

import hljs from 'highlight.js';

hljs.configure({ languages: ['javascript', 'python'] });

export const editorModule = {
  syntax: {
    highlight: (text: string) => hljs.highlightAuto(text).value,
  },
  toolbar: '#toolbar',
};

ReactQuill에 전달할 module 파일을 생성합니다. 

 

hljs.configure({ languages: ['javascript', 'python'] });

highlight를 적용시키고 싶은 언어를 위와 같이 선택할 수 있습니다.

 

export const editorModule = {
  syntax: {
    highlight: (text: string) => hljs.highlightAuto(text).value,
  },
  toolbar: '#toolbar',
};

이렇게 하면 설정이 완료됩니다.

 

      <ReactQuill
        forwardedRef={quillRef}
        value={contents}
        onChange={setContents}
        modules={editorModule} // quill에 전달
      />

이를 ReactQuill의 module 속성에 전달하면 됩니다.

 

3. Custom Toolbar에 적용

이제 에디터에 적용해 봅시다

 

const QuillToolbar = () => {
  return (
    <div id='toolbar'>
      <span className='ql-formats'>
        <button type='button' className='ql-code-block' />
        <button type='button' className='ql-clean' />
      </span>
    </div>
  );
};

export default QuillToolbar;

이렇게 커스텀 toolbar를 생성하고

 

<button type='button' className='ql-code-block' />

위와 같은 태그를 만들면 됩니다. ql-code-block이 아래 이미지 왼쪽의 코드 블록을 지정하는 버튼입니다.

 

커스텀 툴바에 대해 자세한 설명은 공식 문서를 봅시다.

https://quilljs.com/docs/modules/toolbar/

Toolbar Module - Quill

 

    <div className={styles.quillContainer}>
      <QuillToolbar quillRef={quillRef} />
      <CustomReactQuill
        forwardedRef={quillRef}
        className={styles.quill}
        value={contents}
        onChange={setContents}
        placeholder='내용을 입력해주세요.'
      />
    </div>

그리고 Toolbar와 ReactQuill을 같은 레벨의 컴포넌트에 위치하면,

 

코드 블록 삽입 기능 추가 완료입니다.