[HTML/CSS] 블로그 Code Highlighting 및 스킨 변경.

[HTML/CSS] 블로그 Code Highlighting 및 스킨 변경.

 

 

    이번에 블로그 스킨을 바꾸면서 예전에 설정 해 두었던 code highlight 기능이 날아가 버렸다. 검색해서 다시 설정하려고 하니, 새로 CDN 서버를 이용하는 새로운 Highlighter 가 나온 것 같아서 적용해 보고, 기존의 것과 비교도 해 보고, 적용하면서 여러 바꾼 설정들도 정리 해 두려고 한다.

 

    기존 사용하던 Code highlighter의 경우는 이곳에서 확인 가능한 Syntax Highlighter 이다. 이 경우는, CDN 서버를 이용하는 게 아니라 직접 source / css / js 파일들을 다운로드하여서 Tistory 홈페이지에 업로드하여 진행했었다. 테마도 다양하고, 코드를 입력하는 것도 그렇게 어렵진 않았지만, 직접 html을 조작해서 코드를 입력해야 하는 점이 조금 불편했다.

 

<pre "brush=python;">
    # Write Code here...
</pre>

 

    그런데 이번에 오랜만에 글을 쓰려고 보니 새로운 에디터가 나와서 HTML 편집 기능과 코드 첨부 기능이 굉장이 간편해진 것을 확인했다. 아직은 여러 가지 문제점이 새로운 에디터에 있다곤 하지만 HTML 편집과 코드 첨부 기능만 해도 굉장하다고 생각한다. 여하튼, 이 코드 첨부 기능을 통해 코드를 첨부하면 Code Block 만 나올 뿐, Highlighting이 적용이 안되어서 나온다. 이를 위해서 기존에 사용하던 Syntax Highlighter와 새롭게 확인한 Highlight.js를 고민하게 되었다. 코드 첨부 기능은 코드를 입력하면 자동으로 

 

<pre id="code_1554774712620" class="c++ cpp" data-ke-type="codeblock">
	<code>
    	// Write Code here...
	</code>
</pre>

 

같이 <pre> 와 <code>, 그리고 설정한 언어에 따른 class만 넣어준다.

 

    두 라이브러리 모두 이번의 새로운 에디터를 지원하여 무엇을 사용해도 상관없긴 하나, 이왕이면 새로운 라이브러리를 써 보고 싶기도 하고, 소스를 직접 받고 업로드하는 것이 번거롭기도 하여 Highlight.js를 사용하기로 했다.

 

    적용 방법은 간단하다. 먼저 다음과 같은 CDN 추가 코드를 복사한다. ( https://cdnjs.com/libraries/highlight.js/ 에서 cdn 최신 버전을 확인 할 수 있다. ) 간단히 말하면, 다른 홈페이지나 서버에 있는 Code Highlight 소스들을 가져와서 web browser에 로딩하는 과정이다.

 

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

 

    그리고 글을 쓰면 된다. 새로운 에디터로 code - block을 선택하고, 글을 작성해 보자. ( 필자는 deafult.min 대신 railscasts.min 테마를 참고했다. 테마의 이름은 https://github.com/highlightjs/highlight.js/tree/master/src/styleshttps://github.com/highlightjs/highlight.js/tree/master/src/styles에서, 테마의 형태는 https://highlightjs.org/static/demo/ 에서 확인 가능하다. ) 적용 한 뒤 작성한 코드를 확인해 보면

 

[ 사진 1 - 새로 작성한 padding=20px, background=yes ]

 

코드 둘레에 이상한 것이 생겼다. 또, 이전 블로그 글의 코드를 보면

[ 사진 2 - 이전에 작성한 padding=20px, background=yes ]

 

처럼 스타일 조차 적용이 안된 것을 확인 가능하다.

 

    두 코드의 차이라면 이전의 코드는 <pre> 로만 코드를 감싸고 있고, 이후의 코드는 <code> 블록까지 생성되어 감싸고 있다는 점인데, 사진 1의 둘레를 보면 사진 2의 배경색과 동일한 것을 알 수 있다.

 

    한번 스킨 html / css를 확인 해서 pre 코드의 배경이 설정되어있거나, pre 관련된 margin 설정도 확인해 보면 다음과 같은 설정이 있다. 혹시 몰라 code의 관련된 설정도 확인해 보았다.

 

pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */ }

...

.article_view pre {
  padding: 20px;
  background: rgba(0, 0, 0, 0.05);
  font-size: 16px;
  color: rgba(34, 85, 51, 0.87);
  white-space: pre-wrap; }

 

    위의 설정은 font 사이즈를 의미하는 것 같고, code 설정도 font 를 의미하는 것 말곤 없는 것 같다. 그러나 그 아래에, pre 관련 background 설정이 있는 것을 확인했다. 저부분을 지우거나 주석 처리 한 뒤 코드를 작성해 보았다.

 

[ 사진 3 - 새로 작성한 padding=20px, background=no ] 

 

[ 사진 4 - 이전에 작성한 padding=20px, background=no ]

 

    이전의 코드가 약간 다르고 안이쁘긴 하지만, 어쩔 수 없이 감수해야 하는 부분 같으며, 이를 또 새로운 에디터로 변경하여 다시 작성하면 코드가 바뀔 것이므로 따로 변경하진 않을 계획이다.

 

    또 padding 설정도 바꿔보았으나, background 색이 없기 때문인지 큰 차이는 못 느꼈으며, 오히려 여백이 없어져서 더 답답한 느낌이었다. 이는 저 padding 부분만 0px / 삭제 / 주석 처리만 해 주면 되는 부분이므로 넘어가도록 하겠다.