[React] React-Quill + highlight.js

📱테스트 환경

"react": "18.2.0"
"react-dom": "18.2.0"
"typescript": "^4.9.5"

---

 

GitHub - zenoamaro/react-quill: A Quill component for React.

React-Quill 를 이용해서 에디터를 이용하고있는데

사용방법은 아주 간단하니까 공식 페이지만 참고해도 누구나 따라할 수 있었을 것이다.

근데 이제 code-block 를 사용하려고 보면 이게 다른곳에서 보던것처럼

색상구분이없다 보니까 뭔가뭔가 어색한 ..

그래서 찾아보니까 highlight 랑 같이써서 해결하는 방법이 있더라.

설정은 다음과 같다.

// quillConfig.tsx

import hljs from "highlight.js";
import "highlight.js/styles/github.css";

hljs.configure({
  languages: ["javascript", "ruby", "python", "java", "cpp", "kotlin", "sql"],
});

export const modules = {
  syntax: {
    highlight: (text: any) => hljs.highlightAuto(text).value,
  },
  toolbar: [
    [{ header: [1, 2, false] }],
    ["bold", "italic", "underline", "strike", "blockquote", "code-block"],
    [
      { list: "ordered" },
      { list: "bullet" },
      { indent: "-1" },
      { indent: "+1" },
    ],
    ["image"],
    [{ align: [] }, { color: [] }, { background: [] }],
  ],
};
export const formats = [
  "header",
  "bold",
  "italic",
  "underline",
  "strike",
  "blockquote",
  "code-block",
  "list",
  "bullet",
  "indent",
  "link",
  "image",
  "align",
  "color",
  "background",
];

필요한건 공식 홈페이지에서 찾아서 추가하면 되는 구조이다.

사용할때는

<ReactQuill
    modules={modules}
    formats={formats}
    onChange={setContent}
    defaultValue={content}
/>

이런식으로 사용해주면된다.

이런식으로 색상이 들어간 것을 확인할 수 있다