[SyntaxHighlighter] Syntax Highlighter 티스토리 설치 (호스팅모드)

Syntax Highlighter 2.0

블로그를 하는 큰 이유중에 하나는 개발관련 정리 및 기록이고,
그러다 보면 필수적으로 소스를 입력해야 한다.

소스라는 것의 특성상, (또는 적응한 나의 눈은..) highlight가 제대로 되지 않으면
필연적으로 가독성이 떨어지기 마련이고, 전달 또한 제대로 되지 않기 마련이다.

어찌할까.. 고민하던 중에 tistory에는 자바스크립트를 올리고 사용할 수 있는, 기능이 있다는..
것을 발견한지 몇일 -_-;;

그리고 찾은 것은 Syntax Highlighter 2.0

티스토리에 설치하는 방법이다.

해당 라이브러리는 hosting을 제공한다.
prototypejsscriptaculous, jquery 등 유명한 라이브러리는 구글에서도 버전별 호스팅
제공하고있는데 이런 점의 장점은
같은 js를 사용하는 사이트가 많으면 사용자는 A사이트 접속 후 B사이트에 방문해서도
같은 주소의 js를 보고 캐쉬된 js를 사용할 수 있으므로 대역폭도 절약되고
처음 방문하는 사이트의 로딩속도도 향상될 수 있는 그런 장점이 있다.

단점은, 호스팅 서버가 죽는 경우 제대로 표시되지 않을 수 있다는 점.

이하 설치방법.

1. 사용할 버전 및 테마를 결정한다.
   1. 쇼핑을 하는 즐거운 마음으로 theme를 구경하고 선택한다.
      (emac theme로 결정 😉 해당 테마 화면에 있는 css 주소를 확인.
      <link type=”text/css” rel=”Stylesheet” href=”/styles/shThemeEmacs.css”/>
   2. 사용할 버전을 리스트에서 선택한다.
       최신버전을 향하는 current 결정

2. 티스토리 스킨 편집
   1. 관리자 모드로 들어가서 스킨 -> HTML/CSS 편집으로 이동.
      – 스타일 시트 부분에 shCore.css 와 shThemeEmacs.css 추가


      – <title>과 </head> 사이에 아래 스크립트 포함 및 실행 구문을 넣어준다.

이것으로 완료!

글을 쓸때 EDIT 모드에서
<pre> 태그나 <script>를 이용해서 작성할 수 있다.

1. pre tag 사용

2. script tag 사용 (CDATA 사용에 주의)

– js를 사용할 수 있으니 상당히 많은 짓(?)을 할 수 있을듯.. 음하하;;

Comments

comments