티스토리 블로그에 Syntaxhighlighter 적용하기 본문

티스토리 스킨만들기/TIP

티스토리 블로그에 Syntaxhighlighter 적용하기

  • nOo9ya
  • 2017. 11. 14. 00:35

복잡한소스나 긴 소스라면 내가 짜둔 코드라도 보기가 힘들때가 많다.
심지어 다른 사람에게 소스를 쉽게 설명해야하는데 하얀여백에 검은 코드들이 빽빽하게만 쓰여있다면?

설명하는 사람이나 설명을 듣는 사람 또는 시간이 지나 직접 짠 소스를 다시봐도 멘붕이 찾아올것이다.

시간이 지나면 어차피 소스를 기억하기도 힘들지만 이왕이면 알아보기 쉽고 예쁘게 보인다면 정말 좋을것이기 때문에
내 소스를 알아보기 쉽고 예쁘게 보여주게 도와주는 Syntaxhighlighhter를 적용하는 방법을 알아보자.


이 포스트는 어차피 티스토리 블로그에서 작성하는 것이므로 티스토리에 적용하는 방법을 기준으로 설명하겠습니다.
그럼 시작~(빠른 포스팅을 위하여 이하 경어 생략)



STEP 1. 우선 Syntaxhighlighter 다운로드

https://github.com/syntaxhighlighter/syntaxhighlighter/releases

Syntaxhighlighter는 현재까지(2017년 11월 13일 기준) v3.0.90 까지 릴리즈 되었으나 우리는 scss 컴파일도 귀찮고하니 v3.0.83 버전을 적용하도록하겠다. (v3.0.90은 테마가 scss만 있고 v3.0.83은 테마가 css 파일로 압축되어 있다.)


※ syntaxhighlighter 원본 파일 다운로드

github 릴리즈 페이지에서 찾기가 귀찮으니 파일 다운로드 링크 좌표를 찍겠다.

Syntaxhighlighter v3.0.83 Source code(zip) - 윈도우 사용자

Syntaxhighlighter v3.0.83 Source code(tar.gz) - 리눅스 사용자

zip이나 tar.gz 둘중에 아무거나 다운 받자.
어차피 압축은 풀린다.


※ shCore.css 수정 파일 다운로드 (아래 내역 적용을 안하시는 분들은 안받으셔도 됩니다.)

  • 사용법 : 원본 shCore.css 파일을 덮어쓰기 하면 끝.
  • 폰트 크기 10pt, 자동 줄바꿈에 필요한 style 수정, overflow-y Scroll 제거를 위한 커스터마이징 파일
  • 폰트 크기가 맘에 안들면 shCore.css 파일안에서 font-size:10pt 속성을 수정하면 됩니다.




STEP 2. Syntaxhighlighter 폴더 및 파일 설명


syntaxhighlighter 폴더 목록syntaxhighlighter 폴더 목록


다운로드 받은 Syntaxhighlighter 파일을 압축 해제해서 폴더 구조를 살펴보면 위와 같이 나온다.
하지만 우린 딱 두가지 폴더만 있으면 된다.

  • syntaxhighlighter-3.0.83/scripts : js 파일 폴더
  • syntaxhighlighter-3.0.83/styles : css 파일 폴더

※ scripts

  • shCore.js / shLegacy.js 파일은 필수 업로드 파일
  • 나머지 Brush 파일은 내가 예쁘게 사용할 언어들을 선택해서 업로드 할 파일
  • shAutoloader.js 는 스크립트를 이용하여 Brush 파일들을 호출해주는 스크립트이지만 우린 사용하지 않겠다.

syntaxhighlighter 스크립트 파일syntaxhighlighter 스크립트 파일


※ 만약 신택스하이라이터가 적용되지 않고 XRegExp 에러가 난다면 XRegExp.js 파일을 shCore.js파일 위에 링크를 하시기 바랍니다.!!!!
소스는 아래와 같은 순서로 적용하시면 됩니다.

<script .... src="./images/XRegExp.js">
<script .... src="./images/shCore.js">
<script .... src="./images/shLegacy.js">
이하 생략!!

MiniCountryMan 님께서 제시해준 문제 덕분에 알게되었습니다. 다시한번 감사드립니다 ㅠㅠ
앞으로는 더욱더 검증을 철저히 하여 포스팅 하겠습니다 ㅠㅠ 죄송합니다.

수정 : 2018년 10월 21일





※ styles

  • 나는 오직 RDark.css 테마만 사용하겠다면 shCoreRDark.css 파일만 업로드 하면 된다.
    ※ shCoreRDark.css 는 shCore.css + shThemeRDark.css 파일이다.
  • 주기적으로 테마를 바꾸거나 해당하는 페이지에서는 다르게 보이게 하기 위해서 shCore.css와 Theme css 를 따로 올려도 무관하다.

syntaxhighlighter 테마 파일syntaxhighlighter 테마 파일




STEP 3. Syntaxhighlighter 파일 업로드 (티스토리 관리 -> 꾸미기 -> HTML/CSS 편집 -> 파일업로드)

※ shCore.js / shLegacy.js  파일 및 사용할 Brush 선택 업로드

syntaxhighlighter 스크립트 파일 업로드syntaxhighlighter 스크립트 파일 업로드



※ shCore.css 와 사용할 Theme 파일 업로드 (샘플로 shThemeRDark.css 파일 업로드)



※ 업로드 완료된 파일 목록





STEP 4. Syntaxhighlighter 스크립트 적용

  1. "티스토리 관리 -> 꾸미기 -> HTML/CSS 편집"에서 HTML 파일 수정
  2. HTML 파일안에 </head> 바로위에 아래 소스 붙여넣기 ( </head>는 소스 상단에 위치하고 있으며 CTRL + F 단축키로 검색하시면 쉽게 찾습니다. )
    3.


※ 주의사항

  • 수정된 shCore.css를 사용하지 않으시면 스크립트 소스는 아래와 같이 넣으시면 됩니다.
    •
  • shCore.js 와 shLegacy.js는 Brush.js 파일들보다 위에 위치해야 합니다.
  • 사용하지 않을 Brush는 소스와 파일 삭제, 사용할 Brush는 파일 업로드 후 <script src="사용할Brush.js"></script> 추가
  • Theme.css 파일은 제일 마지막에 위치한 Theme 하나만 적용되므로 Theme는 하나만 적용합니다.
  • 사용하지 않는 shTheme*.css / shBrush*.js 파일들은 소스와 파일을 삭제하셔서 로드 시간 단축과 저장공간을 확보하세요.



STEP 4 까지 끝마쳤다면 Syntaxhighlighter 사용준비가 완료되었습니다.
적용하다 잘 안되거나 모르는 부분이 있다면 댓글 남겨주시면 성심성의껏은 아니지만 최대한 아는만큼 답변해드리겠습니다.


다음에는 Syntaxhighlighter 지원 언어와 사용법에 대해 다루겠습니다.



공유하기 링크

티스토리 스킨만들기/TIP Related Articles

MORE

티스토리툴바