[TIL] 내 웹사이트에 코드 Syntax highlight 적용하기

깃허브 또는 인기있는 블로그 사이트 등을 보면 마크다운 문법을 통해서 코드 태그에 언어마다 다른 하이라이트 기능을 넣을 수가 있다. 벨로그도 마찬가지로 다음처럼 사용이 가능하다.

<body>
	<div>
		Hello, world!
	</div>
</body>

하지만 나의 웹사이트는? 기본적인 세팅의 <code>태그를 사용하면 글자색은 커녕 배경색도 제대로 보이지 않는다. 내가 만든 사이트에서도 위처럼 멋진 하이라이트 기능을 넣어보자!

그러나.. 직접 구현하려면 엄청나게 오랜 시간이 걸릴 것이다. 희망적이게도 이미 훌륭하신 분들이 아주 좋은 도구를 만들어두었다!

highlight.js 공식

바로 highlight.js 라는 라이브러리이다. 이는 내가 원하는 웹 아무데서나 code syntax highlight 기능을 사용할 수 있도록 도와주는 도구이다.

자세한 사용방법은 해당 깃허브 사이트를 통해 배울 수 있다. 여기서는 내가 어떻게 사용했는지에 대해 간단하게 서술해보겠다.

  1. 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"/>

  2. 프로젝트 내부에서 사용한다.

    ...
<pre><code class="language-언어이름">{내용}</code></pre>
...
    • 만약에 React에서 사용하고 싶다면 npm 패키지(npm install highlight.js)로 받아서 useEffect로 해당 페이지에서 hljs.highlightAll()를 실행해주는 것이 맞겠다.

  3. 완성!

[javascript] 함수 오버로드 만들기
[백준/c++] 24228번: 젓가락

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage