코딩소스에 하이라이트(코드블럭) 넣는법 (Highlight.js)
코딩소스에 하이라이트(코드블럭)을 추가하는 방법에는 여러 가지가 있지만, 이 포스팅에서는 Highlight.js 라이브러리를 사용하는 방법을 소개합니다.
1. Highlight.js 라이브러리 추가하기
먼저, Highlight.js 라이브러리를 HTML 문서에 추가해야 합니다. Highlight.js 라이브러리는 다양한 언어의 코드를 하이라이트하는 기능을 제공해줍니다. 다음의 코드를 <head> 태그 안에 추가하여 Highlight.js 라이브러리를 가져옵니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.4.1/styles/default.min.css" integrity="sha512-**********************" crossorigin="anonymous" />
<script>hljs.initHighlightingOnLoad();</script>2. 코드블럭 추가하기
Highlight.js를 사용하여 코드에 하이라이트를 적용하려면, <pre> 태그와 <code> 태그를 사용해야 합니다. 아래와 같이 코드블럭을 정의할 수 있습니다.
<pre><code class="language-javascript">
// 여기에 코드를 작성하세요
</code></pre>class 속성을 이용하여 언어를 지정할 수 있습니다. 위 예시에서는 "language-javascript"로 지정되어 있습니다. 언어 지정은 코드를 더 정확하게 하이라이트하는 데 도움을 줍니다. 여러 언어의 하이라이트를 지원하므로, 언어에 따라 클래스 속성을 변경해주면 됩니다.
3. 스타일 설정하기
하이라이트된 코드블럭에 스타일을 적용하기 위해 CSS 코드를 추가해야 합니다. Highlight.js는 다양한 스타일을 제공하므로 원하는 스타일을 선택하여 사용하면 됩니다. 위의 <link> 태그에서 가져온 default.min.css 파일에는 기본 스타일이 포함되어 있습니다. 스타일을 변경하려면 default.min.css 파일을 다른 CSS 파일로 교체하거나 직접 CSS 코드를 작성하여 이 파일을 추가한 뒤, 수정하면 됩니다.
마무리
이렇게 하면 Highlight.js 라이브러리를 사용하여 코딩소스에 하이라이트(코드블럭)을 추가할 수 있습니다. 먼저 Highlight.js 라이브러리를 HTML 문서에 추가한 다음, 코드블럭을 <pre> 태그와 <code> 태그로 추가하고 언어를 지정해 줍니다. 마지막으로, 스타일을 설정하면 됩니다. 이렇게 하면 코드가 보기 좋게 하이라이트되어 표시됩니다.
더 자세한 내용은 Highlight.js 공식 문서를 참고하시기 바랍니다.
댓글