소스 코드 강조 도구 SyntaxHighlighter 적용 및 설정 하 는 법 
 블로그 & 인터넷 / 티스토리 2019 . 1 . 3 . 00 : 58 INKman 
 티스토리 블로그 를 운영 하 면서 HTML , CSS 등 스킨 에 개성 을 주 기 위해 편집 을 하 는 일 이 많 아 지 는데 , 스킨 을 편집 하 면서 생긴 노하우 등 을 공유 하 고 싶 을 때 소스 코드 를 < pre > 나 < code > 등 으로 단순히 작성 하 다 보 면 보 는 이 의 입장 에서 는 복잡 하 여 이해도 가 떨어질 수 도 있 고 개별 적 으로 색상 을 지정 해 줄 수 도 있 지만 여간 힘든 게 아닌데 이 를 SyntaxHighlighter 도구 를 이용 하 면 간편 하 게 해결 이 가능 합니다 . 
 소스 코드 하이라이트 기능 은 호스팅 을 제공 하 기 때문 에 파일 들 을 다운로드 하 여 등록 하 는 불편 함 없이 HTML 편집 을 통해 < head ></ head > 사이 에 넣 어 주 기 만 하 면 간단 하 게 적용 이 가능 합니다 . 
 하이라이트 를 적용 하 기 위해서 는 필수 적 으로 위 4 줄 정도 가 < head > 사이 들어가 며 나머지 블러시 스크립트 들 은 표현 하 고자 하 는 형식 에 맞추 어 필요 한 것 만 적용 하 여도 무방 합니다 . 
 Default shThemeDefault . css 
 Django shThemeDjango . css 
 Eclipse shThemeEclipse . css 
 Emacs shThemeEmacs . css 
 Fade To Grey shThemeFadeToGrey . css 
 Midnight shThemeMidnight . css 
 RDark shThemeRDark . css 
 설정 하 기 및 사용 하 기 
 표현 하 고 싶 은 코드 
 첫째 줄 
 둘째 줄 
 셋째 줄 
 하이라이트 기능 을 사용 하 면서 가독성 을 위한 다양 한 기능 들 을 추가 하 여 사용 이 가능 한데 , 클래스 에 highlight : [ 1 , 3 ] 를 추가 하 여 사용 이 1 , 3 번 줄 에 배경 을 추가 하 여 특정 라인 을 강조 할 수 있 습니다 . 
 소스 코드 제목 넣 기 
 클래스 이름 부여 하 기 
 클 래스 를 추가 하 여 특성 에 맞 는 속성 을 설정 이 가능 하 며 , 샘플 처럼 클래스 는 복수 생성 하 여 개별 속성 을 부여 할 수 있 습니다 . 
 시작 번호 설정 
 first - line : 10 설정 으로 시작 번호 의 라인 을 10 과 같이 설정 하 여 1 번 부터 가 아닌 지정 한 번호 로 시작 할 수 가 있 습니다 . 
 기본 상태 접 기 설정 
 collapse : true 설정 으로 소스 코드 가 펼쳐지 지 않 은 내용 을 보여 주 지 않 는 접 은 상태 로 노출 가능 합니다 . 툴바 를 제거 한 상태 에서 접 기 를 하 였 를 때 펼치 기 버튼 이 활성 화 되 지 않 음 으로 collapse 를 사용 하 기 위해서 는 toolbar : true 상태 이 어야지 만 펼치 기 기능 이 활성 화 됩니다 . 
 오른쪽 상단 툴바 제거 
 toolbar : false 오른쪽 상단 에 노출 되 는 물음표 모양 의 정보 버튼 을 숨 깁니다 . 
 넘버링 제거 
 gutter : false 왼쪽 에 노출 되 는 순번 을 표기 하 지 않 게 할 수 있 니다 . 
 오토 링크 해제 
 auto - links : false 코드 에 웹 주소 가 있 을 때 자동 으로 링크 가 생성 되 는데 이 를 자동 생성 되 지 않 도록 합니다 . 
 각 옵션 들 은 소스 코드 를 사용 할 때 마다 설정 을 할 수 있 지만 , 등록 해 두 고 사이트 내 에 모른 코드 에 일괄 적 으로 적용 이 가능 합니다 . 
 세로 스크롤 이 생성 되 는 것 을 padding 속성 으로 방지 할 수 있 습니다 . 
 http : / / alexgorbatchev . com / SyntaxHighlighter 사이트 에서 설치 , 설정 , 테마 등 다양 한 정보 를 확인 할 수 있 습니다 . 
 구독 하 기 INKman ' s Blog 
 ' 블로그 & 인터넷 / 티스토리 ' 카테고리 의 다른 글 : 
 티스토리 공유 버튼 만들 기 2018 . 12 . 30 
 티스토리 Portfolio 스킨 SNS 공유 버튼 만들 기 2018 . 12 . 28 
 티스토리 사이드바 인기 글 목록 추가 하 기 2018 . 12 . 21 
 티스토리 블로그 사이드바 썸 네 일 치 환자 적용 2018 . 12 . 14 
 Tag : pre , SyntaxHighlighter , 블로그 , 소스 코드 
 Comment : + 0 . 
 ◀ PREV 1 · · · 16 17 18 19 20 21 22 23 24 · · · 443 NEXT ▶ 
 Total : 1 , 432 , 586 Yesterday : 1 , 129 Today : 178