웹페이지에 소스코드를 올릴 때 그냥 붙여넣으면 모두 같은 색으로 나와서 읽기가 어렵다.

이럴 때 SyntaxHighlighter는 코드의 키워드나 명령문, 주석 등에 색을 입혀서 가독성을 높여준다.



(▼ 코드가 색칠된 모습을 볼 수 있다.)




 SyntaxHighlighter를 블로그에 적용하면 게시물을 쓸 때

간단한 태그로 쉽게 코드에 색을 입힐 수 있다.


먼저 http://alexgorbatchev.com/SyntaxHighlighter/download/ 에서 최신 버전의 파일을 내려받는다.

scripts 폴더를 보면 각종 프로그래밍 언어들의 Brush 파일들이 있는데

shAutoloader, shCore, shLegacy파일은 필수적으로 업로드하고, 추가로 자신이 쓸 언어들을 더 올린다.

여기서는 AS3, Cpp, Java, JS, Php, Xml 파일을 선택했다.





그 다음 스타일시트 파일을 올리는데, shCore.css 파일은 기본적으로 올려야 하고

기본 스타일로 하려면 shCoreDefault, shThemeDefault 파일을 선택한다.

하이라이터가 다른 모양으로 나타나게 하려면 그 테마의 스타일시트 파일을 올려야 한다.

테마가 적용된 모습은 http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/ 여기서 볼 수 있다. 




필요한 파일을 다 올렸으면 메인 스킨의 html파일로 들어가서

head태그 안에 아래와 같은 코드를 추가해야 한다.

<link rel="stylesheet" type="text/css" href="./images/shCore.css" />
<link rel="stylesheet" type="text/css" href="./images/shCoreDefault.css" />
<link rel="stylesheet" type="text/css" href="./images/shThemeDefault.css" />
<script type="text/javascript" src="./images/shCore.js"></script>
<script type="text/javascript" src="./images/shAutoloader.js"></script>
<script type="text/javascript" src="./images/shBrushAS3.js"></script>
<script type="text/javascript" src="./images/shBrushCpp.js"></script>
<script type="text/javascript" src="./images/shBrushJava.js"></script>
<script type="text/javascript" src="./images/shBrushXml.js"></script>
<script type="text/javascript" src="./images/shBrushJScript.js"></script>
<script type="text/javascript" src="./images/shLegacy.js"></script>
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>

코드를 보면 아까 업로드한 css파일과 js파일들의 경로를 볼 수 있다. (티스토리는 리소스 파일들이 images폴더에 저장되어 저런 경로를 써주어야한다.)

테마나 다른 언어를 추가하고자 할 땐 이것도 추가해야 한다.

그리고 마지막으로는 SyntaxHilighter.all();함수를 호출한다.


 


이제 블로그 게시글을 쓸 때 하이라이터를 쓸 수 있는데,

<pre class="brush:언어의 명칭(alias)">

코드

</pre>

HTML 모드로 들어가서 위와 같이 적어주면 된다.


예를 들어 C++언어를 쓰려고 한다면

<pre class="brush:cpp">

코드

</pre>

로 적어주면 되는것이다.


나머지 언어들의 alias들은 여기서 확인할 수 있다.

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/





한가지 중요한 주의점이 있는데

코드에 < 문자가 들어가면 코드가 깨지고 하이라이팅도 정상적으로 되지 않으므로

<문자가 있으면 모두 &lt; 로 바꿔야 한다.

찾아바꾸기를 지원하는 텍스트 에디터를 쓰거나 직접 간단한 프로그램을 작성하여 일괄적으로 바꿔놓으면 간단하다.


<pre>태그 대신 <srcipt>태그를 쓰면 이 문제는 해결되지만

특정환경(티스토리 모바일 등)에선 코드가 아예 안보이게 되는 점을 주의해야 한다.


script태그로 코드를 넣는 법은

http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html 

이 주소에 쉽게 설명되어 있다.



그리고 여러 가지 기능을 비롯한 더 자세한 설명은 신택스하이라이터 공식 페이지에 접속하면 볼 수 있다.

http://alexgorbatchev.com/SyntaxHighlighter



 




+ Recent posts