[HTML / CSS] 구글 블로그 (Blogger) 에 highlight.js 적용시켜 코드를 꾸며보기

날짜:

 

최근 블로그를 다시 본격적으로 시작하면서 코드 하이라이트를 바꾸고 싶어서 여러가지로 찾아봤는데, 개인적으로 highlight.js를 사용하는 것이 가장 마음에 들었다. highlight.js를 blogger에 어떻게 적용시키는지, 디자인을 어떻게 자신이 원하는대로 바꿀 수 있는지 차근차근 알아보도록 하자.



코드 하이라이트 (Code Highlight)에 대하여

개발 블로그를 운영하는 사람들이라면 코드를 어떻게 블로그에 적용하는지 고민을 한 경험이 있을 것이다. 특정 코드를 그냥 복사 + 붙여넣기 한다면 필시 이상한 모양으로 나올 것이다. 가령

public void Hello(){

    System.out.println("hello world");

}

이렇게 말이다. 못 볼 정도는 아니지만 코드의 길이가 길어지면 가독성도 상당히 떨어지며 무엇보다 이쁘지가 않다. 이걸 원치 않은 대부분의 개발 블로그는 코드 하이라이트 (code highlight)로 블로그를 이쁘게 꾸미곤 한다. 코드 하이라이트의 정확한 뜻은 모르지만 네모난 영역에 코드를 에디터에서 보는 것처럼 코드의 색, 자간 등을 꾸미는 것을 의미한다고 생각하면 될 것이다.

예외적으로 안드로이드 스튜디오에서 복사를 하고 내용을 그대로 블로거에 붙여넣기 하면

public void Hello(){
    System.out.println("hello world");
}

아래와 같이 코드 하이라이트가 되어 보여지게 되는데, 이 부분을 Html로 본다면 아래와 같은 코드가 나오게 된다.

<pre style="background-color: #2b2b2b; color: #a9b7c6; font-family: 'Menlo',monospace; font-size: 9.0pt;"><span style="color: #cc7832;">public void </span>Hello(){<br />    System.out.println(<span style="color: #6a8759;">"hello world"</span>)<span style="color: #cc7832;">;<br /></span>}</pre>
자동으로 <pre> 영역에서 디자인하여 보여주고 있는데, 그렇다고 코드 하이라이트를 위해 이러한 기능을 지원하는 에디터를 열어 코드를 입력할 수만은 없을 것이다. 물론 코드를 입력하려면 에디터로 작성하는 게 맞긴하지만, 본인이 원하는 디자인을 default 값으로 정할 수는 없다. 

자신에게 맞는 스타일로 코드를 커스텀하기 위해선 코드 하이라이트를 제공하는 웹사이트에서 변환해서 html에 붙이거나, highlight.js와 같은 것을 이용해서 변환하곤 한다. 그 중 blogger에서 highlight.js를 사용하는 방법을 지금부터 알아보자.



highlight.js 사용해보기

일단 기본적인 사용법과 디자인 테마를 보고 싶다면 아래의 링크에서 확인을 할 수 있다. (물론 전부 영어로 나오므로 강제로 공부하게 되는 효과가 있다!)

물론 링크를 던져놓고 '당신이 알아서 해봐라'라는 식이라면 글을 작성하지도 않았다. 아래의 순서대로 차근차근해본다면 큰 어려움 없이 적용할 수 있을 것이다.


1. blogger의 <head> 태그에 highlight.js 등록하기

blogger의 테마 - 맞춤설정 옆의 화살표 클릭 - HTML 편집을 클릭하면 아래와 같은 화면이 나올 것이다.

쭉 내려서 </head>를 찾아보자. 이 때 너무 내려서 <body>로 내려가지 말고 </head> 태그를 찾기 힘들다면 라인 번호가 있는 곳을 보면 <head>와 <body> 등을 접을 수 있는데, 이것을 이용하면 쉽게 찾을 수 있다.
</head>를 찾았다면 </head> 바로 위에 아래의 코드를 집어넣도록 하자. 

<!-- hightlight.js -->
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/androidstudio.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
위의 코드는 https://highlightjs.org/usage/ 여기서도 확인할 수 있는데, 링크에서 제공하는 코드는 <link> 태그가 제대로 닫혀있지 않아 아마 오류가 날 것이다. <link href=.... ..."> 부분에 </link>를 추가하면 될 것이다.

참고로 여기서 <link> 태그 내용을 보면 "style/" 뒷부분에 androidstudio.min.css 가 적용할 테마가 되는데, 이 것은 자신이 highlight.js 홈페이지에 들어가 원하는 테마를 적용하면 된다. 위와 같이 AndroidStudio 테마를 적용하고 싶으면 androidstudio.min.css가 되는 것이며, GoogleCode 테마를 적용하고 싶다면 googlecode.min.css가 되겠다.


2. 자신이 사용하는 에디터에서 코드를 복사해오기

귀찮다면 아래의 코드를 복사해서 테스트해보아도 좋다. 

public void Hello(){

    System.out.println("hello world");

}

3. blogger 에디터의 왼쪽 상단에 연필 아이콘을 눌러 'HTML 보기'로 전환하고,  블로그의 원하는 영역에 <pre><code></code></pre> 를 이용하여 코드 삽입하기

즉 아래와 같은 방식으로 넣는다는 이야기가 되며,
<pre><code class="언어 이름"> 
"하이라이트할 코드 내용"
</code></pre>

예시는 아래와 같다.

<pre><code class="java">
public void Hello(){

    System.out.println("hello world");

}

</code></pre>
이 때 비교적 많이 사용하는 언어는 cdn에서 지원하는 언어에 한해 자동으로 언어를 감지하므로 클래스를 구태여 쓰지 않아도 정상적으로 작동되긴 하지만, 제대로 감지하지 못하는 경우에는 class="language-언어 이름"과 같은 방식으로 작성해보자. 


html 코드가 이쁘지 않게 나올 경우

html과 같은 경우 '<' 를 사용하게 되는데, '<' 를 사용하게 되면 하이라이트가 제대로 적용되지 않아 이상하게 나올 수 있다. 이를 위해 html escape를 지원하는 사이트가 있다.
아래의 링크에 접속해서 Raw Html로 바꾸고자하는 코드 (즉, '<' 등을 포함하여 하이라이트가 이쁘지 않게 나오는 코드)를 넣고 escape를 적용하고 다시 <pre><code> 태그 안에 적용된 코드를 넣으면 이쁘게 나올 것이다.

여기까지 큰 문제가 없다면 정상적으로 하이라이트를 적용할 수 있을 것이다.




highlight.js 꾸미기

아마 이 정도만 적용해도 만족하고 사용하는 분들도 많을 것이라고 생각하지만, 좀 더 자신만의 디자인을 적용하고자하는 사람들도 있을 것이라 생각한다. 필자도 폰트나 글자 간격 등이 맘에 안들어 디자인을 조금 바꿨는데, blogger에서 highlight.js로 하이라이트한 부분의 디자인을 바꾸는 방법을 알아보자.



1. blogger의 테마 - 맞춤설정 클릭 - 고급 - css 추가를 클릭한다.


혹시 css 추가를 못 찾았는가? 아래 화살표와 함께 "본문" 이라고 적혀있는 곳을 클릭하고 나온 드롭다운 메뉴를 스크롤 하면 나올 것이다. (멍청하게도 이걸 못 찾아서 조금 헤맸다.)




2. css 추가에서 highlight.js에 적용할 디자인을 삽입한다.

이 부분은 어느 정도의 css 지식이 필요한데, 여러 블로그들을 돌아다니면 자신만의 디자인을 올려놓은 블로거 분들이 많은데, 올려준 분들에게 감사하며 사용해보도록 하자. 필자가 블로그에서 사용한 디자인은 아래와 같으며, 한 번 사용해보면서 css를 어떻게 적용해볼지 생각하는 것도 좋을 것 같다.

.hljs {
    border-radius: 1%;

    margin: 0px 0px;
    font-family: Consolas, Monaco, monospace;
    font-size: 10pt;
    letter-spacing: 0px;
    line-height: 1.3em;
    overflow-x: auto;
}





마치며..

다른 하이라이터도 많고 하이라이트를 지원하는 좋은 웹사이트도 많으며 같은 테마로도 좀 더 이쁜 방법으로 꾸미는 사람들이 많을테지만, 미적 감각이 떨어지기 때문에 간단한 사용법 제공이 본인으로서는 한계다. 뭔가 잘 되지 않거나 좋은 방법을 원한다면 여러 블로그를 돌아다니면서 찾아보는 것도 좋을 것이라 생각한다. 자신에게 딱 맞는 디자인을 찾아 멋진 블로그를 꾸밀 수 있길 기원하며 글을 마치겠다.

댓글

댓글 쓰기