티스토리 뷰

티스토리

소스코드 문법 하이라이트(SyntaxHighlighting) 넣기

Kanzler 2016. 4. 30. 19:36

컴퓨터 프로그래밍 코드 관련 글을 작성 할 때 전체 혹은 부분 소스를 다른 사용자들이 참고 할 수 있도록 하기 위해 함께 올릴 때가 있습니다. 소소 코드는 일반적으로 코드 에디터 개발툴(비주얼 스튜디오,이클립스,안드로이드 스튜디오)을 이용 해서  작업을 합니다. 이러한 특정 툴을 이용 해서 작업 이유는 개발툴을 통해 여러가지 기능을 제공 받아 좀더 편하고 쉽게 코드를 작성 하기 위함 입니다.

이러한 툴에서 제공 해주는 다양한 기능들을 활용 함으로서 개발자들은 개발 시간을 단축 시킬 수 있는 것입니다.  하지만 이렇게 작성한 소스코드를 웹으로 통해 게시 하면 코드의 가독성이 굉장히 떨어지게 됩니다. 소스 코드 중에서 어떤게 키워드 인지, 메소드의 시작과 끝이 어디까지 인지 한눈에 쏙 들어오지 못하게 됩니다. 


그래서 이러한 소스 코드를 게시 할때는 가독성을 좋게 하기 위해서 문법강조(SyntaxHighlighting) 기능을 제공 해주는 자바스크립트 파일을 사용 하여 게시 해 주는것이 일반적입니다. 현재는 이러한 문법강조(SyntaxHighlighting) 스크립트를 제공 해주는 여러 곳 중에서 대표적인 것에는 어떤 것이 있는 살펴 보겠습니다.


 

  • SyntaxHighlighter

http://alexgorbatchev.com/SyntaxHighlighter/download


  • highlight.js

https://highlightjs.org/



현재 많이 사용 되고 있는 있는것은 위 두가지입니다. 두곳 모두 제공 해주는 기능에는 큰 차이가 나지 않기 때문에 각각 사용 해보시고 자신의 취향에 맞는 것을 사용 하시면 됩니다. 이번 글에서 SyntaxHighlighter를 사용 하는 방법에 대해서 설명 해 드리겠습니다. 


SyntaxHighlighter


SyntaxHighlighter는 홈페이지에서 스크립트파일을 다운 받아 해당 파일을 자신의 사이트에 업로드 하여 사용 하는 방식으로 제공 되고 있습니다. 여기서는 티스토리 블로그에 사용 하는 것은 조건으로 설명 해 드리겠습니다.우선 위 링크로 이동 후에 파일을 다운 받아 압춥을 풀어 줍니다.



받은 파일을 압축을 풀면 아래와 같은 파일을 볼 수 있습니다. 해당 파일 중 script 와 styles 폴더를 업로드 해야 합니다.




티스토리 [관리자] -> [꾸미기] ->[HTML/CSS 편집]으로 이동  해줍니다.





동편집기로 이동 후 [파일업로드]-> [추가]를 눌러 압축을 해제 해놓은 script 와 styles폴더 안에 파일을 업로드 한 후 저장 버튼을 눌러 줍니다.


이제 스크립트들을 사용 할 수 있는 있게 되었습니다. 이제 해당 스크립트를 사용 하겠다고 명시 해주는 작업을 해주어야 합니다.

현재 이동 해 있는 HTML/CSS 편집기 화면에서 상단의 메뉴 중 "HTML"를 선택 해 준 후  </head> 위에 아래의 코드를 추가 해줍니다.

 <link rel="stylesheet" type="text/css" href="./images/shCoreEclipse.css" />

<body>태그에는 아래의 코드를 넣어 줍니다.




이제 SyntaxHighlighter를 사용할 준비는 모두 끝났습니다.
이제 작성된 소스 코드에 태그를 추가해 주면 됩니다. 태그를 추가 해주는 작업은 HTML편집모드에서 진행 하므로 글 작성 시 상단에 HTML체크박스를 선택 해준 뒤 코드를 넣어 주시면 됩니다.




기본 사용법

<pre class="brush: java">

 소스 코드

</pre>

<pre class="brush: java">와 </pre>로 소스 코드를 감싸주면 됩니다. brush란에는 소스 코드의 언어를 넣어 주면 됩니다. 여기서는 자바코드를 예로 들어 "JAVA"를 사용 했지만 C,C#,자바스크립트 경우에는 각각의 언어에 맞는 코드를 넣어 주어야 합니다.지원해 주는 언어의 확인은 아래의 URL에서 확인 할 수 있습니다. 현재 거의 사용 되는 대부분의 개발언어를 지원 해주고 있습니다.

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


 <pre class="brush: java">
 class Hello
 {
    public static void main(String[] args)
    {
        System.out.println("Hello, Java");
    }
 }
 </pre>


적용 후

class Hello
{
    public static void main(String[] args)
    {
        System.out.println("Hello, Java");
    }
}


SyntaxHighlighter는 기본 사용법이외에도 여러가지 옵션을 제공 해 주고 있습니다. 그외 사용법은 아래 메뉴얼에서 확인 할 수 있습니다.

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

이제 SyntaxHighlighter는 사용 함 으로서 소스코드의 가독성이 훨씬 높아졌습니다. 이제 코드가 한눈에 들어 오게 되었습니다.


저작자표시 비영리

'티스토리' 카테고리의 다른 글

ZUM 사이트 검색 등록하는 방법  (0) 2016.07.26
티스토리 방문자 이상 현상  (0) 2016.05.10
티스토리(TISTORY)블로그 구글에 검색 노출 시키기2(구글 웹마스터도구 이용)  (7) 2016.04.28
티스토리(TISTORY) 블로그 네이버(NAVER)에 검색 등록 및 노출 시키기  (0) 2016.04.17
티스토리(TISTORY) 블로그 구글에 검색 노출 시키기  (0) 2016.04.16
공유하기 링크
댓글