티스토리에서 최신버전의 코드하이라이터를 적용해보자!
포스트 일자 기준 최신 버전(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 <stdio.h>
void main()
{
printf("코드하이라이터 테스트\n");
}
</pre>
<stdio.h> 부분을 아마도 태그로 인식하고 자동으로 </stdio.h> 추가하는 모양이다.
따라서 "<" ">" 기호를 태그로 변경해주었다.
< → <
> → >
태그로 변경해 주면 문제가 해결된다. 하지만 모든 "<" ">" 기호가 들어간곳을 일일이 변환해 주기란 어렵다.
이를 빠르게 변환해주는 툴을 찾아보았다. 역시 있었다! (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>
이와같이 스킨파일을 수정하고 보면 크롬에서 나타나는 스크롤바와 익스플로러에서 히긋히긋? 거리는 현상이 사라진다.