정말 쉽게 코드 예쁘게 작성하기

소요 시간: 5분 조회수: 42

블로그에서 코드 하이라이팅을 어떻게 적용할 수 있는지에 대해 알아보았다. 사실 구글 블로거와 같은 플랫폼에서는 기본적으로 코드 하이라이팅 기능이 제공되지 않아서, 코드를 예쁘게 표시하려면 별도의 도구를 사용해야 한다. 여러 가지 도구들이 있지만, 그 중에서 highlight.js라는 라이브러리가 가장 간편하고 효과적이라 선택했다. 그래서 오늘은 그 사용법을 익히기로 했다.


Highlight.js 세팅하기

먼저, highlight.js를 설치하고 설정하는 방법부터 시작했다. 이 라이브러리는 CDN을 통해 쉽게 불러올 수 있다. 그래서 공식 웹사이트에 접속해서 필요한 링크를 복사했다.

1. Highlight.js 홈페이지 방문

웹사이트에 접속해서 Usage 메뉴를 찾았다. 여기서 필요한 코드들을 쉽게 찾을 수 있었다.

2. CDN 링크 복사하기

스크롤을 내려 Fetch via CDN 섹션을 찾았다. 여기에서 두 가지 중요한 링크를 복사했다. 첫 번째는 스타일을 적용하는 CSS 링크이고, 두 번째는 하이라이팅을 실행하는 JS 링크다.

복사한 CSS 링크는 <head> 태그 안에 넣어주고, JS 링크는 </body> 태그 바로 위에 추가해줬다. 이렇게 해야 페이지가 로드될 때 코드 스타일링이 제대로 적용된다.

3. 하이라이팅 활성화 코드 추가하기

스크롤을 다시 올려서 하이라이팅을 실행하는 자바스크립트 코드도 복사했다. 이 코드를 </body> 태그 바로 위에 넣어주면, 페이지 내의 모든 코드 블록에 하이라이팅이 적용된다.

결국, 나의 HTML 구조는 이렇게 됐다:

<head>
  ...
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
</head>
<body>
  ...
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
  <script>hljs.highlightAll();</script>
</body>

이렇게 간단한 세팅만으로 코드 하이라이팅을 적용할 수 있었다.


코드 블록 작성하기

이제 하이라이팅이 적용될 코드를 작성하는 방법을 알아봤다. 기본적으로 코드 블록은 <pre> 태그로 감싸고, 그 안에 <code> 태그를 사용해서 코드를 넣으면 된다.

<pre><code></code></pre>

그런데 중요한 점은 언어 지정이다. 하이라이팅을 제대로 적용하려면 코드의 언어를 명시해야 한다. 예를 들어, Python 코드를 하이라이팅하려면 class="python"을 추가하면 된다.

<pre><code class="python"></code></pre>

이제, 내가 작성한 Python 코드 예시를 넣어보았다. print("Hello, world!")라는 코드를 넣었더니, 스타일이 적용되어 깔끔하게 보였다.

<pre><code class="python">print("Hello, world!")</code></pre>


다양한 언어 하이라이팅

highlight.js는 다양한 언어를 지원한다. 그래서 내가 다른 언어를 하이라이팅하려면, <code> 태그의 class 속성만 바꿔주면 된다. 예를 들어, HTML 코드라면 class="html", Kotlin 코드라면 class="kotlin"을 사용하면 된다.

몇 가지 예시를 더 들어보면:

HTML 코드

<pre><code class="html">&lt;div&gt;Hello World!&lt;/div&gt;</code></pre>

Kotlin 코드

<pre><code class="kotlin">fun main() { println("Hello, world!") }</code></pre>

이렇게 다양한 언어의 코드를 같은 페이지에 넣을 수 있다. 코드마다 다른 하이라이팅 스타일이 적용되어 보기 좋고, 가독성이 높아진다.


마무리

오늘은 highlight.js를 사용하여 코드 하이라이팅을 설정하고, 블로그에 예쁘게 코드를 표시하는 방법을 익혔다. 사실 그동안 코드가 너무 평범하게 보였는데, 이렇게 스타일을 적용하니 훨씬 깔끔하고 보기 좋다. 이제 다른 블로그나 글을 쓸 때 코드가 포함된다면, 언제든지 이 방법을 활용할 수 있을 것 같다.

블로그에 코드를 자주 포함시키는 사람이라면, highlight.js를 꼭 활용해 보는 걸 추천한다.

인기글

자바스크립트 리스트