[코드 블럭] highlight 라이브러리 사용해서 code block 적용하기 (React, Typescript)

728x90

안녕하세요, 제니입니다!

오늘은 코드블럭을 구현하는 법에 대해 정리하려고 합니다.

요즘에 프로젝트에 1인 프론트엔드 개발자로 투입되어 있어서

(벌써 2번째,,,)

여러모로 해야하는 기능과 UI가 많아져서 좋네용,,,,,!

코드블럭 구현을 위해 오늘은 highlight라는 라이브러리를 사용하려고 합니다.

제 개발 환경은 React, TypeScript, yarn 입니다!

1. highlight 설치

https://highlightjs.org/

yarn add highlight.js

위 링크를 통해 공식문서도 확인하실 수 있습니다.

1-1. import

import hljs from 'highlight.js';
import 'highlight.js/styles/a11y-dark.css';

css 파일도 동시에 import를 해줄 건데요!

이건 원하는 디자인으로 바꾸면 되니까, 먼저 이렇게 셋팅 해볼게요.

2. 사용해보기

useEffect(() => {
    hljs.highlightAll();
}, []);

사용하고자 하는 컴포넌트 내에서

useEffect로 위 코드처럼 렌더링해줍니다!

2-1. 사용하는 코드

import React, { useEffect } from 'react';
import 'highlight.js/styles/a11y-dark.css';
import hljs from 'highlight.js';

const TopicCodeBlock = () => {
	useEffect(() => {
	   hljs.highlightAll();
	}, []);
    
	return (
		<pre>
		   <code>
		      <div>안녕하세요</div>
		         <div>제니입니다</div>
		   </code>
		</pre>
	);
};

export default TopicCodeBlock;

예시코드를 만들어보았습니다.

<pre>태그 내에 <code>태그를 두고 작성을 시작할거에요!

이렇게 위 코드처럼 구현하면

위에 나오는 모습처럼 코드 모양이 나오게 됩니다.

3. 스타일 적용하기

node_modules 내 highlight.js 폴더 내에 styles에서

원하시는 디자인에 맞춰서 설정하실 수 있습니다.

저는 디자이너분과의 소통을 진행하면서

import 'highlight.js/styles/paraiso-light.min.css';

원하시는 paraiso-ligh.min 컬러로 설정했어요!

이렇게 화이트 배경에 색상이 들어가는 코드블럭 입니다.

4. 최종 코드

import React, { useEffect } from 'react';
// import 'highlight.js/styles/a11y-dark.css';
import 'highlight.js/styles/paraiso-light.min.css';
import hljs from 'highlight.js';
import styled from 'styled-components';
import theme from '@/styles/theme';

interface TopicCodeBlockProps {
	desc: string;
}
const TopicCodeBlock = ({ desc }: TopicCodeBlockProps) => {
	useEffect(() => {
		hljs.highlightAll();
	}, []);

	return (
		<PreContainer>
			<Code>{desc}</Code>
		</PreContainer>
	);
};

export default TopicCodeBlock;

const PreContainer = styled.pre`
	border: 1px solid ${theme.color.borderBottom};
	border-radius: 4px;
	width: calc(100% - 40px);
	padding: 20px;
	margin: 0;
	> code.hljs {
		padding: 0;
		background: white;
	}
`;

const Code = styled.code``;

일단 최종 코드는 이렇게 나오는데,

제가 Styled-components를 사용해서 디자인을 적용하고자 했는데요.

code태그의 경우, highlight 라이브러리 내에 depth가 있어서 바로 적용이 안 되더라구요!

4-1. pre 태그 내 hljs 스타일 적용해주기

const PreContainer = styled.pre`
	border: 1px solid ${theme.color.borderBottom};
	border-radius: 4px;
	width: calc(100% - 40px);
	padding: 20px;
	margin: 0;
	> code.hljs {
		padding: 0;
		background: white;
	}
`;

코드에 회색 배경이 깔리는 게 싫어서, 별도로 pre 태그에서 스타일을 잡아주었습니다.

이렇게 하면 원하시는 디자인 적용까지 완료됩니다!

오늘의 기록 끝!