본문 바로가기

기타

블로그에 소스코드 적용하기

블로그에 포스팅 할때 프로그램 소스코드를 이쁘게 작성하고 싶을 때 유용한 하이라이트 기능을 적용해 보자.!!

 

syntaxhighlighter_3.0.83.zip

 

위 파일을 다운받아도 되고 아래 사이트에서 [syntaxhighlighter_3.0.83.zip] 다운을 받아도 된다.

http://alexgorbatchev.com/SyntaxHighlighter/download/

사이트에서 "Click hear to download" 링크를 누르면 다운받을 수 있다.

 

1. 꾸미기 > "HTML/CSS편집" 클릭

 

2. "파일 업로드" 클릭

 

3. 하단의 "추가" 버튼을 클릭하고 다운받은 파일에서 "scripts" 와 "styles" 디렉토리 안의 모든 파일들을 업로드 한다

업로드가 완료 되면 아래처럼 목록에 .js .css 가 추가된것을 확인할 수 있다.

 

4. 업로드가 완료 되었으면 "HTML/CSS" 탭으로 이동하여 "skin.html" 의 <head></head>사이에 아래를 추가해 준다.






















5. <head></haed> 사이에 SyntaxHighlighter.all(); 스크립트를 반드시 호출해 주어야 하이라이트 기능을 사용할 수 있다.

 

이로써 모든 설정 작업을 완료!! 이제 사용해보자.

 

# 소스코드 로 작성해보기!

1. 글쓰기 에서 "html" 체크 박스를 클릭한 후 아래와 같이 <pre> 태그안에 소스를 입력하면된다.

 

JAVA 형식으로 할 경우 아래와 같이 브러쉬 이름을 "java" 로 주면 된다.

<pre class=brush:java>

  public void print(){

System.out.println("hello world!!);

  }

</pre>

  public void print(){
    System.out.println("hello world!!);
  } 

프로그램 언어별 브러쉬 이름확인

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