본문 바로가기
Tools

[문법강조] 온라인 소스코드 문법 강조처리기(Syntax Highlighter)

by hs_seo 2015. 5. 26.

<Syntax Highlighter>

블로그나 카페에 소스코드를 올릴 때 그냥 플레인 텍스트를 올리는 것 보다 에디터에서 제공하는 것 처럼 문법을 강조해서 올리면 보기가 더 편하다.

이때 문법 강조를 도와주는 방식이 여러가지가 있는데, 하나는 자바스크립트를 이용해서 올려진 코드를 후처리해서 보는 방법이 있고, 다른 하나는 코드를 HTML 로 변환하여 적용하는 방법이 있다.

 

<자바스크립트 처리>

자바스크립트를 이용한 처리는 <div>, <pre> 등의 태그로 코드를 감싼후 코드가 로딩되는 시점에 사용자 단에서 처리해서 보여주는 방식이다.

가장 많이 사용되는 코드가 다음 링크의 코드이다.

 

Alex Gorbatchev - http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html

 

installation 의 코드를 따라가면 어렵지 않게 적용할 수 있다.

 

<HTML 변환>

 

HTML 변환은 아래의 사이트에 코드를 올리면 선택한 사양에 맞게 HTML 로 변환하여 돌려준다.

HTML 을 그대로 붙여 넣으면 되는 것이다.

간단한 코드를 적용할 때는 이 방법이 더 편리하게 사용할 수 있다.

 

http://hilite.me/

http://highlight.hohli.com/

http://markup.su/highlighter/ - 문법종류 자동 확인/테마 적용

 

 

<hilite.me> 

1
2
3
4
5
6
7
8
9
public class ShellSort {

	public static void main(String[] args) {
		
		for(int i = 0; i < 10; i++){
			System.out.println(i);
		}
	}
}

 

 

<highlight.hohli.com>

  1. public class ShellSort {
  2. public static void main(String[] args) {
  3. for(int i = 0; i < 10; i++){
  4. System.out.println(i);
  5. }
  6. }
  7. }

 

 <markup.su/highlighter>

 

public class ShellSort {

    public static void main(String[] args) {
        
        for(int i = 0; i < 10; i++){
            System.out.println(i);
        }
    }
}


반응형