Vue3 코드블럭 vue-code-highlight 사용법 및 테마 변경

 

vue3 프로젝트를 진행하며, json 데이터를 그 형태 그대로 화면에 예쁘게 보여주고자 방법을 찾다가 가장 먼저 적용해 본 방법은 <pre> 태그를 사용하는 것이다. pre 태그를 사용하면 json 데이터가 화면에 예쁘게 출력되지만 css가 적용되지 않은 pre 태그는 정말 json 그 자체이다. 그래서 코드블록을 예쁘게 보여줄 수 있는 라이브러리가 있는지 찾아보다가 vue-code-highlight라는 라이브러리를 알게 되었고, 한번 적용해 보았다.

 

1. vue-code-highlight 설치

npm, yarn 등 내가 사용하고 있는 패키지매니저에 따라 해당 라이브러리를 설치해 주면 된다.

npm install vue-code-highlight --save

 

2. vue에서 사용할 수 있도록 설정

그다음은 vue에서 사용할 수 있도록 main.js에 해당 라이브러리를 설정한다.

import VueCodeHighlight from "vue-code-highlight";

const app = createApp(App);
app.use(VueCodeHighlight);

설정을 마쳤다면 해당 라이브러리를 사용할 컴포넌트에서 사용하면 된다.

<script setup lang="ts">
import CodeHighlight from "vue-code-highlight/src/CodeHighlight.vue";
import "vue-code-highlight/themes/duotone-sea.css"; // 테마 변경 가능
import "vue-code-highlight/themes/window.css";

const jsonSample = {
	id: 1,
    name: 'Lia',
    phone: '010-0000-0000',
    age: 28
}

</script>
<template>
	<div>
    	<code-highlight language='js'>
        	{{ jsonSample }}
        </code-highlight>
    </div>
</template>

code-highlight 태그 내에 원하는 데이터를 넣어주면 되는데, 기본 pre태그를 적용했을 때와 해당 라이브러리의 duotone-sea 테마 적용 시 전과 후를 비교해 보면 아래와 같다.

라이브러리 미적용 적용

 

3. 테마 및 언어 설정

코드 블록 테마를 변경하고 싶다면 css 파일을 변경해 주면 되는데, 공식 문서에서 변경 가능한 테마와 지원하고 있는 언어를 확인할 수 있다.

GitHub - elisiondesign/vue-code-highlight: Beautiful code highlighter as Vue.js component.

 

 

변경 가능한 테마를 적용하려면 아래처럼 css파일 명을 변경해주면 되고, 언어를 변경하고 싶다면 props로 language 값을 설정해 주면 된다. 기본 값은 js이다. 언어 설정을 어떻게 하느냐에 따라서 각각의 테마에 맞춰 스타일이 변경된다.

// 테마 변경
import "vue-code-highlight/themes/duotone-sea.css";
// import "vue-code-highlight/themes/prism.css";

// 언어 변경
<code-highlight language="js">
  {{ jsonSample }}
</code-highlight>

 

4. 스크롤바 커스텀

실제로 적용해보면 가로로 길어지는 경우 가로 스크롤이 생기는데 기본 스크롤이라 예쁘게 보여주려면 커스텀이 필요하다. 기본적으로 해당 라이브러리는 내부적으로 pre태그를 사용하기 때문에 pre 태그의 스크롤바를 커스텀해주면 된다. 해당 커스텀은 chrome 기준 커스텀 예제이다.

pre {
  overflow-x: scroll;

  &::-webkit-scrollbar {
    width: 2px;  /* 스크롤바 넓이 설정  */
    height: 10px; /* 스크롤바 높이 설정  */
  }

  &::-webkit-scrollbar-thumb {
    background-color: #fff; /* 스크롤바 막대 색상 */
    border: 2px solid #fff; /* 스크롤바 막대 테두리 설정  */
    border-radius: 12px; /* 스크롤바 모서리 설정  */
  }
}