티스토리 최신버전 코드하이라이터 적용

티스토리에서 최신버전의 코드하이라이터를 적용해보자!

포스트 일자 기준 최신 버전(SyntaxHighlighter 3.0.83) 적용은 아래와 같이 나타난다.

또한 적용을 하면서 문제가 됬던 부분들에 대해서 해결 방안들을 제시하고자 한다.

  
#include <stdio.h>

void main()
{
	printf("코드하이라이터 테스트\n");
}

코드 하이라이터의 최신 버전에서는 심플하고 다양한 테마들을 적용할 수 있게 해준다.

코드 하이라이터의 적용은 다음 블로그를 참조하였다.

참조: http://twoday.me/entry/티스토리-SyntaxHighlighter-3x-적용하여-꾸미기

게시글에 코드를 넣고자 한다면 HTML 편집기에서 다음과 같이 작성한다.

brush의 경우 자신이 원하는 코드 타입을 넣어준다.

<pre class="brush: cpp;">  
<!--하이라이트할 소스-->
</pre>

이제 적용하면서 문제가 됬던 부분들을 정리해본다.

1. First Problem

HTML 편집화면에서 pre태그를 이용하여 코드하이라이터를 잘 적용하였다.

하지만 테스트로 C코드를 추가하였는데 다음과 같은 문제가 발생하였다.

#include 

void main()
{
	printf("코드하이라이터 테스트\n");
}

7번째 라인에서 원하지 않는 </stdio.h>가 추가되었다.

크게 문제가 되지는 않지만 거슬린다. 또 지우고 포스트를 업데이트 시켜도 마찬가지다.

추후 버전이 업데이트 되면 해결될거 같지만 현재 해결할 수 있는 방법이 있기 때문에 이를 적용해보자.

<pre class="brush: cpp;">  
#include &lt;stdio.h&gt;

void main()
{
printf("코드하이라이터 테스트\n");
}
</pre>

<stdio.h> 부분을 아마도 태그로 인식하고 자동으로 </stdio.h> 추가하는 모양이다.

따라서 "<" ">" 기호를 태그로 변경해주었다.

< → &lt;

> → &gt;

태그로 변경해 주면 문제가 해결된다. 하지만 모든  "<" ">" 기호가 들어간곳을 일일이 변환해 주기란 어렵다.

이를 빠르게 변환해주는 툴을 찾아보았다. 역시 있었다! (SimpleLayoutConverter.jar 툴)

참조: http://androidhuman.tistory.com/264

2. Second Problem

코드하이라이터를 적용하고 크롬 브라우저에서 보면 스크롤바가 생긴다.

또한 익스플로러에서 마우스를 이용하여 코드하이라이터 내용을 드래그해도 히긋히긋? 움직인다.

이와 관련된 문제는 구글에서 찾을수 있었다.

참조: https://bitbucket.org/alexg/syntaxhighlighter/issue/177/superfluous-vertical-scrollbars-in-chrome

해결하기위한 좋은 방법은 스크롤을 없에는 것인데...

스킨 html 파일에 다음과 같은 코드를 추가하는 것이다.

<style type="text/css">
.syntaxhighlighter { padding-bottom: 1px; }
</style>

이와같이 스킨파일을 수정하고 보면 크롬에서 나타나는 스크롤바와 익스플로러에서 히긋히긋? 거리는 현상이 사라진다.