블로그, 웹에서 프로그래밍 소스코드 문법 하이라이트(Syntax Highlighting 문법강조) 기능 사용하기

컴퓨터

블로그, 웹에서 프로그래밍 소스코드 문법 하이라이트(Syntax Highlighting 문법강조) 기능 사용하기

빌노트 2014. 5. 22. 09:02

컴퓨터 프로그래밍을 하는 코드 에디터(비주얼 스튜디오, 이클립스)에서는 키워드나 중요한 단어를 강조 해주는 기능이 기본으로 들어있습니다. 하지만 웹에서는 그런 기능이 기본으로 제공되지 않습니다. 그래서 프로그래밍 소스코드를 강조해주는 기능인 문법강조(Syntax Highlighting) 기능이 있는 자바 스크립트 파일을 이용하는데 대표적인 것이 위 사진에 나와 있는 SyntaxHighlighter입니다. 직접 만들면 더 좋겠지만 이것이 보통 작업이 아닌지라 그냥 남들이 만든 소스를 사용하는 것이 상책입니다. 많이 사용하는 문법강조 도구로는 어떤 것이 있는지 살펴보겠습니다.

SyntaxHighlighter

http://alexgorbatchev.com/SyntaxHighlighter/

highlight.js

http://highlightjs.org/

google-code-prettify

https://code.google.com/p/google-code-prettify/

더 다양하지만 보통 이 정도를 즐겨 사용하는 것 같습니다. 입맛대로 골라서 사용하면 되지만 사용하기 편하고 다운받을 필요없는 highlight.js를 중심으로 사용하는 법을 간단하게 설명드리겠습니다.

highlight.js

우선 사이트에 접속을 합니다.

http://highlightjs.org/

그러면 어떤 방식으로 코드 문법이 강조되는지 샘플화면이 보입니다.

여기서 바로 Get version 8.0을 클릭!

위와 같이 웹페이지가 열렸다면

윗부분에 있는 두줄의 HTML코드를 복사합니다.

그리고 메모장에 잠시 붙여넣기 해둡시다.

그리고 다시 이전 페이지로 돌아갑니다.

다음은 핑크색 화살표가 가리키는 Usage 링크를 클릭!

위 사진처럼 코드 1줄을 복사해서

아까 전에 붙여넣었던 곳에 추가해서 붙여넣기를 합니다.

<link rel="stylesheet" href="http://yandex.st/highlightjs/8.0/styles/default.min.css">
<script src="http://yandex.st/highlightjs/8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

그럼 위와 같이 3개의 태그가 만들어지는데 이 코드들을 자신의 사이트나 블로그에 추가를 하면됩니다.

보통 <HTML>태그내에 <TITLE>태그 위에 붙여넣으면 무난합니다.

(티스토리 블로거라면 관리자-꾸미기-HTML/CSS편집 화면에서 하면 됩니다.)

Syntax Highlighting을 할 정도로 컴퓨터를 좋아하는 분이라면 여기까지 쉽게 따라하셨지요?

물론 직접 highlight.js파일과 CSS파일을 다운받아서 사이트에 업로드해서 사용하셔도 됩니다.

근데 저는 귀찮아서 그냥 바로 땡겨서 사용합니다 ㅋ (비록 조금은 느릴지라도...)

여기까지 따라하셨으면 바로 글을 쓸때 문법강조를 적용할 수 있는데

그전에 디자인을 위해 CSS파일(HTML에서 디자인을 담당하는 파일)을 변경해보도록 하겠습니다.

highlight.js 첫페이지에 나오는 샘플코드 화면을 클릭할 수 있는데

클릭 할 때 마다 다른 스타일의 문법강조 디자인을 볼 수 있습니다.

그리고 마우스 커서가 그 샘플코드 위에 있으면 어떤 CSS파일을 사용하는지 툴팁이 나옵니다.

(툴팁이 캡쳐가 안되서 사진으로는 안보이고 직접해보셔야 합니다.)

그럼 직접해볼까요?

바로 클릭!

클릭을 하니 문법강조 디자인이 변경되었죠?

그럼 계속 클릭을 하면서 자신이 원하는 디자인의 CSS파일명을 알아내면 됩니다.

저는 railscasts.min.css의 디자인이 마음에 드는군요^^

<link rel="stylesheet" href="http://yandex.st/highlightjs/8.0/styles/railscasts.min.css">
<script src="http://yandex.st/highlightjs/8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

3줄의 코드중에 빨간색으로 표시된 부분만 수정하면 디자인이 변경됩니다.

이렇게 문법강조를 할 수 있게 웹을 셋팅했으니 그럼 사용 할 일만 남았네요.

highlight.js 사용법은 역대 문법강조 중 가장 편한 것 같습니다.

<pre><code> 여기에 코드를 입력합니다 </code></pre>

그냥 이렇게 사용하시면 됩니다. 참 쉽죠?!

highlight.js는 다른 문법강조 툴과는 다르게 속성으로 어떤 언어인지 명시할 필요없이 알아서 처리를 합니다.

그리고 진짜 많은 언어를 지원하죠. C, C++, C#, JAVA는 물론 Python, Delphi, Django...

(Nodejs, Python지원 등 자세한 사항은 사이트를 참고하세요^^)

그럼 직접 테스트를 해보겠습니다.


package com.example.helloworld;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
    
}