블로그에 포스팅 할때 프로그램 소스코드를 이쁘게 작성하고 싶을 때 유용한 하이라이트 기능을 적용해 보자.!!
위 파일을 다운받아도 되고 아래 사이트에서 [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/