SyntaxHighLighter를 이용한 블로그에 소스 코드 올리기

블로그에 소스 코드가 깔끔하게 올라온 글들을 보았을 것이다.

바로 SyntaxHighLighter를 이용하면 이렇게... 쉽게 보기 좋게 올릴 수 있다.

소스 코드를 이쁘게 올리자.
잘 보이나??

제가 티스토리를 이용하는 관계로 티스토리에 적용하는 방법을 적어본다.

(아... 혹시 티스토리 스킨을 바꿀 때는 이작업을 계속 해줘야한다는.... 저도 깜빡하고 스킨 바뀐 후 며칠간 그대로 둔적이 있었서..)

- 버전 : syntaxhighlighter_3.0.83 (2012.11.01 현재)

2. 다운로드한 파일을 압축 해제.

3. 티스토리의 "관리리페이지 > HTML/CSS 편집 > 파일업로드" 메뉴로 이동

4. 추가 버튼을 클릭

5. syntaxhighlighter를 압축 해제한 폴더의 하위 폴더로 이동하여 script 폴더와 style 폴더의 파일을 모두 업로드한다.

: style 폴더에서 shCore.css와 사용하려는 css 파일(ex> shCoreDefault.css + shThemeDefault.css)만 업로드해도 됩니다.

6. 티스토리의 "관리리페이지 > HTML/CSS 편집" 메뉴로 이동

: <head> ... </head> 태그 사이에 아래 소스 삽입

6-1. 코어 스타일과 기본테마를 설정 (스타일과 테마를 변경하려면 두개의 css를 쌍을 맞춰서 변경하면 된다. )

6-2. 필수 js 파일과 사용할 소스 코드 언어에 해당하는 brush를 설정 (저는 귀찮아서 일단 모두 넣어놨어요..^^)

: <head> ... </head> 태그 사이에 아래 소스 삽입

6-3. 마지막으로 highlighter를 활성화

7. 설정은 완료되었고 실제 사용하는 방법입니다.

    /**
     * SyntaxHighlighter
     */
    function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }

## 번들 브로쉬 ##

## 환경설정 및 옵션

728x90

SQL Server Management Studio를 사용해서 연결된 서버를 등록하기 (0)	2012.11.01
JSTL(JavaServer Pages Standard Tag Library) (0)	2012.10.30
scheme (프로그래밍 언어) (0)	2012.10.26

JUST DO IT