목록2024/02/16 (1)

Timpossible history

[React JS] React-quill로 코드 블럭 에디터 설정하기(feat. highlight.js)

커뮤니티 웹사이트나 블로그 형식을 담은 웹사이트를 만들다보면, WYSIWYG(What You See Is What You Get), 텍스트 에디터를 만들 때가 있는데, 이 포스트에서는 그 중 코드 블럭을 생성하는 에디터를 구현해보고 highlight.js를 이용해서 코드를 구분지어주는 작업을 해보도록 하려고한다. 1.프로젝트 설치 npm i react-quill highlight 먼저 필요한 패키지들을 설치해준다. 2. 프로젝트 구현 코드 설정 "use client"; import React, { useState } from "react"; import styles from "./editor.module.css"; import ReactQuill from "react-quill"; import "reac..
프론트엔드/React JS 2024. 2. 16. 19:22
이전 Prev 1 Next 다음