2012년 9월 21일 금요일

blogger(구글 블로그)에서 소스코드 예쁘게 삽입하기(SyntaxHighlighter 사용하기)




아무리 찾아도...
구글 블로그에서 blogspot적용하는 법이 친절하게 나온 곳을 한군데도 찾을 수 없었다.
따라해도 안되는 것 뿐;;

오랫동안 삽질하다가 겨우 알아냈다.

지금 그 방법을 소개하고자한다.


--------------------------------------------------------------------
먼저 소스를 수정하는 곳은
<내 블로그> 메뉴들에서 <템플릿> 을 누르면 <HTML편집>이다.



<HTML 편집> 버튼을 누르면 아래와같은 화면이 나온다.
겁먹지 말고 <계속>을 누른다.


자 이제 소스코드를 수정하는 곳이 나온다.
보면 파란색 네모로 head 태그가 보이는 데 그 밑에 아래와같이 소스를 삽입한다.
초록색 네모부분은 Brush라고 언어에따라 Highlight 시켜주는 스크립트를 삽입시켜준것이다. 필자는 자바Brush를 선택했다.



*삽입된 코드*




*삽입된 코드 상세설명*
(Line:설명)

2     : SyntaxHighlight 를 사용하기 위한 Core 라이브러리

3     : 자바언어에 SyntaxHighlight를 적용하기위한 브러쉬(필요한 브러쉬를 추가하면된다)
4     : SyntaxHighlight의 Core CSS
5     : SyntaxHighlight의 기본테마 CSS
7~9 : SyntaxHighlight 기동




위와같이 코드를 삽입하면 준비는 다 끝이다.
혹시 다른 브러쉬 스크립트를 알고싶다면 아래 링크를 참고하라.

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

자... 이제 사용하는 일만남았다.

사용법은 아주 간단하다.

보여주고 싶은 소스를 <pre class="brush : [브러쉬이름]"> </pre> 로 감싸주기만하면된다.


사용한 예시


<pre class="brush:java">

package tutorial;
import com.opensymphony.xwork2.ActionSupport;
public class HelloWorld extends ActionSupport {
  private String name;
  public String getName() {
    return name;
  }
  public void setName(String name) {
    this.name = name;
  }
  public String execute() {
    name = "Hello, " + name + "!";
    return SUCCESS;
  }
}
</pre>


위와 같이 적용하면 아래와같이 나오게된다.


package tutorial;
import com.opensymphony.xwork2.ActionSupport;
public class HelloWorld extends ActionSupport {
  private String name;
  public String getName() {
    return name;
  }
  public void setName(String name) {
    this.name = name;
  }
  public String execute() {
    name = "Hello, " + name + "!"; 
    return SUCCESS;
  }
}



다음에는 syntaxhighlighter를 적용하면서 생겼던 문제와 그 해결책.
syntaxhighlighter에 내장된 기능 설정방법에 대해 알아보도록 하겠다.

블로그 보관함