깃허브 또는 인기있는 블로그 사이트 등을 보면 마크다운 문법을 통해서 코드 태그에 언어마다 다른 하이라이트 기능을 넣을 수가 있다. 벨로그도 마찬가지로 다음처럼 사용이 가능하다.
<body>
<div>
Hello, world!
</div>
</body>하지만 나의 웹사이트는? 기본적인 세팅의 <code>태그를 사용하면 글자색은 커녕 배경색도 제대로 보이지 않는다. 내가 만든 사이트에서도 위처럼 멋진 하이라이트 기능을 넣어보자!
그러나.. 직접 구현하려면 엄청나게 오랜 시간이 걸릴 것이다. 희망적이게도 이미 훌륭하신 분들이 아주 좋은 도구를 만들어두었다!
바로 highlight.js 라는 라이브러리이다. 이는 내가 원하는 웹 아무데서나 code syntax highlight 기능을 사용할 수 있도록 도와주는 도구이다.
자세한 사용방법은 해당 깃허브 사이트를 통해 배울 수 있다. 여기서는 내가 어떻게 사용했는지에 대해 간단하게 서술해보겠다.
-
index.html파일에 다음 구문을 추가해준다.<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/${테마 이름}.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script> <script> hljs.highlightAll(); </script>이를 통해 highlight.js의 스크립트와 css를 외부로부터 받아와준다.
원하는 테마 이름은 공식홈에서 확인가능하다. 사용하고 싶은 테마가Github Dark Dimmed라면 띄어쓰기는 대시(-)로, 대문자는 소문자로 변환해서(github-dark-dimmed) 입력해주면 된다.예시)
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/github.dark-dimmed.min.css"/> -
프로젝트 내부에서 사용한다.
... <pre><code class="language-언어이름">{내용}</code></pre> ...- 만약에 React에서 사용하고 싶다면 npm 패키지(
npm install highlight.js)로 받아서 useEffect로 해당 페이지에서hljs.highlightAll()를 실행해주는 것이 맞겠다.
- 만약에 React에서 사용하고 싶다면 npm 패키지(
-
완성!
람쥐