반응형
Highlight.js는 코드 구문을 자동으로 강조하는 오픈 소스 라이브러리입니다. 웹 페이지에서 프로그래밍 코드의 문법을 인식하고, 해당 언어에 맞는 스타일로 색상을 적용해 가독성을 높이는 데 사용됩니다. 다양한 프로그래밍 언어를 지원하며, 간단한 설정만으로 웹페이지에 적용할 수 있습니다.
1. 주요 특징
- 자동 언어 감지: Highlight.js는 코드 블록의 언어를 자동으로 감지하여 구문을 강조합니다. 또한, 특정 언어를 지정할 수도 있습니다.
- 다양한 언어 지원: 180개 이상의 프로그래밍 언어를 지원하며, 필요에 따라 특정 언어만 로드할 수도 있습니다.
- 다양한 테마 제공: 다양한 색상 테마를 제공하여, 개발자가 웹사이트 스타일에 맞는 테마를 선택할 수 있습니다.
- 경량성: 설치 및 사용이 매우 간편하고, 경량화된 라이브러리로 웹사이트 성능에 크게 영향을 주지 않습니다.
- 커스터마이징 가능: 기본 기능 외에도 다양한 플러그인과 커스터마이징 옵션을 제공하여, 필요에 맞게 확장할 수 있습니다.
2. 설치 및 사용
- CDN 사용:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/stackoverflow-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>HTML 페이지에 위와 같은 스크립트를 추가하면 Highlight.js가 자동으로 코드 블록을 인식하고 구문을 강조합니다.
- 코드 블록:
웹 페이지에서 코드를 표시하려면<pre>와<code>태그를 사용합니다.
<pre><code class="language-js">
function helloWorld() {
console.log('Hello, world!');
}
</code></pre>
- 특정 언어 지정:
<code>태그에class="language-언어명"속성을 추가하면 특정 언어를 지정할 수 있습니다. 예를 들어,language-js는 자바스크립트를 의미합니다.
3. 예시
자바스크립트 코드 블록을 자동으로 하이라이팅하는 예는 다음과 같습니다.
<pre><code class="language-javascript">
function add(a, b) {
return a + b;
}
</code></pre>이 코드를 실행하면 Highlight.js가 자바스크립트 문법에 따라 코드의 색을 자동으로 적용해 줍니다.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/stackoverflow-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
</head>
<body>
<div>
Test
<pre><code class="language-js">
function helloWorld() {
console.log('Hello, world!');
}
</code></pre>
</div>
</body>
</html>
4. 플러그인과 커스터마이징
Highlight.js는 기본 기능 외에도 다양한 플러그인을 제공하여 더욱 다양한 요구사항을 만족시킬 수 있습니다. 또한 CSS 스타일을 직접 수정하여 색상, 폰트 등을 자유롭게 변경할 수 있습니다.
이 라이브러리는 블로그, 기술 문서 사이트, 개발 관련 웹페이지 등에서 코드 블록을 가독성 높게 표시할 때 유용하게 쓰입니다.
반응형
'언어 > Javascript' 카테고리의 다른 글
| [ Javascript ] ClipboardJS 사용하기 (1) | 2024.10.03 |
|---|---|
| [ JavaScript ] array 배열 사용하기 (0) | 2024.09.23 |
| [ JavaScript ] null 의미와 사용방법 알아보기 (1) | 2024.09.05 |
| [ JavaScript ] var, let, const 변수 선언하기 (0) | 2024.09.05 |
| [ JavaScript ] Visual Code에서 바로 실행해 보자. (0) | 2024.06.17 |
