SyntaxHighlighter 사용하기

SyntaxHighlighter 적용 sample

주로 작성하는 컨텐츠가 IT 분야여서 컨텐츠에 소스코드가 포함되는 경우가 많습니다 이련 경우 SyntaxHighlighter를 사용하면 문서에 포함된 소스코드에 decoration을 추가해서 문서의 가독성을 높일 수 있습니다
아래 샘플도 문서에 포함된 html 소스 코드에 SyntaxHighlighter를 적용한 것입니다

html 코드 외에도 php, c++, java 등 다양한 코드에 SyntaxHighlighter를 적용 할 수 있어 개발 문서를 웹에 게시할 때 유용하게 사용 할 수 있습니다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>HTML sample</title>

</head>

<body>

    <p>

        보기 좋은가요?

    </p>

</body>

</html>

SyntaxHighlighter 설치하기

설치는SyntaxHighlighter 웹사이트에 접속해서 최신파일을 다운로드 받은 뒤 압축을 풀고 FTP 등을 이용해서 서버에 올리면 됩니다
자체 서버가 아닌 티스토리 등 설치형 블로그를 사용하시는 경우 구글 검색이용해서 적용 방법을 찾아보세요
syntaxhighlighter 웹사이트 링크

게시물 작성에 사용된 3.0.83 버전을 사용하시려면 문서에 첨부된 파일을 다운로드 받아서 사용하셔도 됩니다
syntaxhighlighter 3.0.83 파일 다운로드

SyntaxHighlighter 사용을 위한 javascript, css 포함 하기

설치를 완료하고 문서에 SyntaxHighlighter를 적용하려면 head부분에 javascript와 css파일 포함시켜야 합니다

<head>

    <script type="text/javascript" src="../../syntaxhighlighter/scripts/shCore.js"></script>

    <script type="text/javascript" src="../../syntaxhighlighter/scripts/shBrushXml.js"></script>

    <link type="text/css" rel="stylesheet" href="../../syntaxhighlighter/styles/shCoreDefault.css"/>

</head>

shCore.js와 shCoreDefault.css는 반드시 포함되어야 하는 javascript와 css파일 입니다

shBrushXml.js 파일은 xml 또는 html 형식의 내용에 SyntaxHighlighter를 적용하기 위해 포함시킨 파일입니다
사용되는 코드의 형식이 html이 아니라면 다운받은 소스의 scripts 폴더에서 적절한 js파일을 찾아 head에 script 태그를 이용해서 추가해 주세요
불필요한 js파일을 포함시키게 되면 웹페이지 loading 속도가 느려질 수 있으므로 꼭 필요한 js 파일만 포함하는 것이 좋습니다

pre 태그를 이용해서 SyntaxHighlighter 사용하기

필요한 파일을 head 태그에 포힘시켰다면 이제 문서의 body영역에 SyntaxHighlighter를 적용 할 수 있습니다

문서에 적용하는 방법은 버전별로 약간씩 다른 것 같더군요
이전버전에서는 textarea 태그를 사용하기도 하는 것 같은데 여기서는 제가 사용하는 3.0.83 기준으로 설명하겠습니다

SyntaxHighlighter를 문서에 적용하는 방법은 적용할 코드를 pre 태그를 안에 포함하고 class에 코드의 타입만 지정하면 됩니다
간단하죠?

<pre class="brush:html">

<p>

    hi~

</p>

</pre>

pre 태그에 사용된 class명을 지정하는 방법은 brush: + code 타입 입니다
code 타입 부분은 아래 이미지에서 Bush aliases 부분을 참고하면 되는데 해당 aliases를 사용하기 위해서는 적절한 js파일이 head 영역에 script 태그를 이용해서 추가되어 있어야 합니다

기본적인 사용법은 이정도로하고 이제부터는 SyntaxHighlighter를 사용하면서 발생되는 이슈나 해결방법과 설정 변경 등 몇가지 팁을 알려드리도록 하겠습니다

툴바, 스크롤뷰 제거

기본적으로 보여지는 우측 상단의 툴바 버튼을 제거하기를 원한다면 "toolbar:false" 속성을 추가하면 됩니다 가로 스크롤이 생기는 경우도 툴바 제거하면 해결 됩니다

<pre class="brush:xml toolbar:false">

만약 매번 pre 태그에 toolbar 설정을 하는 것이 번거롭다면 페이지 header 부분에 기본 옵션으로 설정해도 됩니다

<script type="text/javascript">SyntaxHighlighter.defaults['toolbar'] = false;</script>

크롬에서 세로 스크롤 제거

크롬에서 세로 스크롤이 생기는 경우가 있는데 css에 아래 라인을 추가하면 해결 됩니다

.syntaxhighlighter { padding-bottom: 1px; }

또는 아래와 같은 방법으로도 해결 할 수 있습니다

syntaxhighlighter {

  overflow-y: hidden !important;

}

설정 변경 참고 문서

그외 설정과 부분은 SyntaxHighlighter 사이트를 참고하면 됩니다
사이트에 접속하면 오른쪽 상단 부분에 configuration이라는 메뉴가 있습니다

syntaxhighlighter와 관련된 css 수정 참고 문서

아래 URL에 css를 수정하는 샘플이 포함되어 있습니다
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/css.html

해당 문서를 참고해서 shCore.css파일을 수정하면 되며 직접 수정하기 싫다면 html에 포함된 css에 아래와 같이 추가해도 됩니다

.syntaxhighlighter

{

    padding-left: 0px !important;

    font-size: 0.8em !important;

}

shCore.css파일은 syntaxhighlighter 하위 폴더인 styles 폴더에 존재합니다

게시물에 줄바꿈 추가하기

가로로 길게 써도 줄바꿈이 되지 않고 스크롤이 생긴다면 아래 코드를 css에 추가해서 해결 할 수 있습니다

.syntaxhighlighter .line {

        white-space: pre-wrap !important; /* make code wrap */

}

pre태그 내에서 <, > 등 특수문자 처리

"<" 또는 ">"가 들어간 코드는 html태그로 인식하기 때문에 정상적으로 보여지지 않는데 이런 경우 &lt나 &gt로 치환해야 합니다

일일이 치환히기가 불편한 경우 변환을 커니님께서 만드신 변환툴을 이용하면 편리하더군요
아래 링크에서 다운로드 받으실 수 있습니다
커니님이 만드신 태그 변환 툴 링크

혹시 링크가 깨진다면 첨부된 문서에서 다운로드 받아 주세요
커니님이 만드신 태그 변환 툴 다운로드

JavaTutorials

2014년 2월 9일 일요일