etc/티스토리 활용 2017. 7. 26. 14:17
블로그에 글을 올릴 때 소스 코드를 넣어야 하는 경우가 있다.

이 경우 그냥 소스 코드를 텍스트로 올리면 보기도 좋지 않고 가독성도 떨어지기 때문에, 소스 코드에 대한 가독성을 좋게 하는 syntaxhighlight 플러그인을 이용하는 것이 좋다.

검색을 해보면 syntaxhighlighter 플러그인은 대부분 다음 오픈 소스가 나온다. - http://alexgorbatchev.com/SyntaxHighlighter/

현재 4 버전이 최신인데, 기존과 사용법이 변경되어, 예전 방식 중 최신 버전인 3.0.83을 사용했다.

기존 블로그를 참고했지만, 개인적으로는 시행착오를 겪어서 좀 자세하게 남긴다.

1. 3.0.83 버전 파일 다운로드

다운로드 후 압축을 풀면 다음과 같은 폴더 구조를 볼 수 있다.
여기서 사용할 폴더는 붉은 상자 안의 두 폴더이다.
save image

2. 티스토리 관리에서 HTML/CSS 편집을 실행한다.
save image

3. 파일업로드
save image


4. 처음 다운로드 했던 파일중 scripts, styles 폴더의 파일을 모두  업로드 한다. 
save image

styles
save image

5. HTML 코드 수정
save image
HTML 탭을 선택하고 먼저 <head> 안에 css 파일을 link 시킨다.
여기서 css파일은 앞에서 업로드 했던 파일 중에 하나를 선택하면 되고, 이 파일에 따라 코드 highlight 모양이 다르게 적용 된다. 

textarea 태그를 사용하기 위해 body 태그에 다음을 추가한다.
save image

마지막으로 js 파일을 읽어들일 수 있게 다음을 추가한다.
2~3번 라인의 순서는 꼭 지켜야 한다.

5~30라인은 필요한 것만 사용해도 된다.

5. 모두 적용 후 테스트

<textarea name="code" class="brush:python;" cols="60" rows="10">import sys

def hello():

    print "hello world"

</textarea>





'etc > 티스토리 활용' 카테고리의 다른 글

티스토리 단축키 활용  (0) 2014.04.07
posted by 구닥다리 엔지니어
: