코드 소스 하이라이트 SyntaxHighlighter 를 수정하여 예쁘게 꾸며봅시다.

SyntaxHighlighter 라는 code syntax highlighter 의 색상과 레이아웃을 수정해서 티스토리(Tistory) 블로그를 예쁘게 꾸며봅시다.

SyntaxHighlighter 를 티스토리(Tistory) 블로그에 적용하는 방법은 여기를 클릭해서 참고하세요 ^^

우선 기본 html 브러쉬를 사용해서 출력한 결과입니다. (참고로 스크린샷입니다.)

뭐 이대로 사용해도 나쁘지 않은데요. 이 전에 쓴 글에도 설명드렸지만, line-height를 em으로 설정시 위 처럼 행번호와 코드 줄이 어긋날 수도 있고 여러가지 편의상 문제가 있을수 있으므로 수정을 권합니다.

아래는 오늘까지 shCore.css 와 제가 수정해서 사용하고 있는 테마 shThemeTomato.css 를 적용한 결과입니다.

색상은 뭐 자기 개성이 있는거니까요... 아래 코드의 주석을 보시고 색상을 변경해 보세요 ^^

우선 shCore.css 수정한 코드입니다. ( 아래 소스 다운로드 shCore.css )

/**
 * SyntaxHighlighter
 * http://alexgorbatchev.com/SyntaxHighlighter
 *
 * SyntaxHighlighter is donationware. If you are using it, please donate.
 * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
 *
 * @version
 * 3.0.83 (July 02 2010)
 * 
 * @copyright
 * Copyright (C) 2004-2010 Alex Gorbatchev.
 *
 * @license
 * Dual licensed under the MIT and GPL licenses.
 *
 * @Customized by Sometimes-n
 * http://sometimes-n.tistory.com/
 *
 */
.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {
  -moz-border-radius: 0 0 0 0 !important;
  -webkit-border-radius: 0 0 0 0 !important;
  background: none !important;
  border: 0 !important;
  bottom: auto !important;
  float: none !important;
  height: auto !important;
  left: auto !important;
  line-height: 15px !important; /* 글자행 높이 1.1em -> 15px 로 수정 */
  margin: 0 !important;
  outline: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  position: static !important;
  right: auto !important;
  text-align: left !important;
  top: auto !important;
  vertical-align: baseline !important;
  width: auto !important;
  box-sizing: content-box !important;
  font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 10pt !important; /* 폰트크기 1em -> 10pt 로 수정 */
  min-height: inherit !important;
  min-height: auto !important;
}

.syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 1em !important;
  padding: 2px 0; /* 세로 스크롤바 없애는 padding 값 추가 */
}
.syntaxhighlighter.source {
  overflow: hidden !important;
}
.syntaxhighlighter .bold {
  font-weight: bold !important;
}
.syntaxhighlighter .italic {
  font-style: italic !important;
}
.syntaxhighlighter .line {
  white-space: pre-wrap !important; /*  줄 바꿈 pre -> pre-wrap 으로 수정 */
  word-break: break-all !important; /* 줄 바꿈할때 띄어쓰기 없는 문자도 모두 줄바꿈 할 수 있도록 추가 */
  padding: 0 0.2em 0 0.2em !important; /* 좌우 여백 추가 */
  font-size: 10pt !important; /* 폰트 사이즈 추가 */
  line-height: 15px !important; /* 글자행 높이 추가 */
}
.syntaxhighlighter table td.gutter .line { /* 라인 번호 설정 class */
  text-align: right !important; 
  padding: 0 0.2em 0 0.4em !important;  /* 좌우 여백 추가 */
  min-width: 10px !important; /* 최소 넓이 추가 */
  font-size: 10pt !important; /* 폰트 사이즈 추가 */
  white-space: nowrap !important; /* 라인 번호가  길어져도 줄 바꿈하지 않도록 추가 */
  line-height: 15px !important; /* 줄 바꿈 높이 추가 */
}

.syntaxhighlighter table {
  width: 100% !important;
}
.syntaxhighlighter table caption {
  text-align: left !important;
  padding: .5em 0 0.5em 1em !important;
}
.syntaxhighlighter table td.code {
  width: 100% !important;
}
.syntaxhighlighter table td.code .container {
  position: relative !important;
}
.syntaxhighlighter table td.code .container textarea {
  box-sizing: border-box !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  background: white !important;
  padding-left: 1em !important;
  overflow: hidden !important;
  white-space: pre !important;
}
.syntaxhighlighter table td.code .line {
  padding: 0 0.2em 0 0.2em !important; /* 좌우 넓이 수정 */
}
.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line {
  padding-left: 0em !important;
}
.syntaxhighlighter.show {
  display: block !important;
}
.syntaxhighlighter.collapsed table {
  display: none !important;
}
.syntaxhighlighter.collapsed .toolbar {
  padding: 0.1em 0.8em 0em 0.8em !important;
  font-size: 1em !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
}
.syntaxhighlighter.collapsed .toolbar span {
  display: inline !important;
  margin-right: 1em !important;
}
.syntaxhighlighter.collapsed .toolbar span a {
  padding: 0 !important;
  display: none !important;
}
.syntaxhighlighter.collapsed .toolbar span a.expandSource {
  display: inline !important;
}
.syntaxhighlighter .toolbar {
  position: absolute !important;
  right: 1px !important;
  top: 1px !important;
  width: 11px !important;
  height: 11px !important;
  font-size: 10px !important;
  z-index: 10 !important;
}
.syntaxhighlighter .toolbar span.title {
  display: inline !important;
}
.syntaxhighlighter .toolbar a {
  display: block !important;
  text-align: center !important;
  text-decoration: none !important;
  padding-top: 1px !important;
}
.syntaxhighlighter .toolbar a.expandSource {
  display: none !important;
}
.syntaxhighlighter.ie {
  font-size: .9em !important;
  padding: 1px 0 1px 0 !important;
}
.syntaxhighlighter.ie .toolbar {
  line-height: 8px !important;
}
.syntaxhighlighter.ie .toolbar a {
  padding-top: 0px !important;
}
.syntaxhighlighter.printing .line.alt1 .content,
.syntaxhighlighter.printing .line.alt2 .content,
.syntaxhighlighter.printing .line.highlighted .number,
.syntaxhighlighter.printing .line.highlighted.alt1 .content,
.syntaxhighlighter.printing .line.highlighted.alt2 .content {
  background: none !important;
}
.syntaxhighlighter.printing .line .number {
  color: #bbbbbb !important;
}
.syntaxhighlighter.printing .line .content {
  color: black !important;
}
.syntaxhighlighter.printing .toolbar {
  display: none !important;
}
.syntaxhighlighter.printing a {
  text-decoration: none !important;
}
.syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a {
  color: black !important;
}
.syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a {
  color: #008200 !important;
}
.syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a {
  color: blue !important;
}
.syntaxhighlighter.printing .keyword {
  color: #006699 !important;
  font-weight: bold !important;
}
.syntaxhighlighter.printing .preprocessor {
  color: gray !important;
}
.syntaxhighlighter.printing .variable {
  color: #aa7700 !important;
}
.syntaxhighlighter.printing .value {
  color: #009900 !important;
}
.syntaxhighlighter.printing .functions {
  color: #ff1493 !important;
}
.syntaxhighlighter.printing .constants {
  color: #0066cc !important;
}
.syntaxhighlighter.printing .script {
  font-weight: bold !important;
}
.syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a {
  color: gray !important;
}
.syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a {
  color: #ff1493 !important;
}
.syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a {
  color: red !important;
}
.syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a {
  color: black !important;
}

위 소스를 다운로드 받거나 복사해서 shCore.css 로 저장해서 [TISTORY 관리 -> 꾸미기 -> HTML/CSS 편집 -> 파일업로드]에 업로드 하세요.

참고로 익스플로러에서는 바로 업로드하면 덮어쓰기가 되는데 크롬에서는 해당 파일을 관리 페이지에서 삭제하고 업로드해야 적용되더군요.

그러면, 색상을 뺀 나머지가 적용되었을 것입니다. 확인해 보시고 잘 적용되었다면 이제 색상을 변경할 차례입니다.

아래는 테마 파일인 shThemeTomato.css 코드입니다. 위 스크린샷처럼 색상이 변경된 테마파일입니다.

shThemeTomato.css 파일 다운로드 (shThemeTomato.css)

/**
 * SyntaxHighlighter
 * http://alexgorbatchev.com/SyntaxHighlighter
 *
 * SyntaxHighlighter is donationware. If you are using it, please donate.
 * http://alexgorbatchev.com/SyntaxHighlighter/donate.html
 *
 * @version
 * 3.0.83 (July 02 2010)
 * 
 * @copyright
 * Copyright (C) 2004-2010 Alex Gorbatchev.
 *
 * @license
 * Dual licensed under the MIT and GPL licenses.
 *
 * @Customized by Sometimes-n
 * http://sometimes-n.tistory.com/
 *
 */
.syntaxhighlighter {
  background-color: white !important;
}
.syntaxhighlighter .line.alt1 {
  background-color: white !important;
}
.syntaxhighlighter .line.alt2 {
  background-color: white !important;
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {
  background-color: #e0e0e0 !important;
}
.syntaxhighlighter .line.highlighted.number {
  color: black !important;
}
.syntaxhighlighter table caption {
  color: black !important;
}
.syntaxhighlighter .gutter {
  color: #afafaf !important;
}
.syntaxhighlighter .gutter .line {
  border-right: 3px solid #6ce26c !important;
}
.syntaxhighlighter .gutter .line.highlighted {
  background-color: #6ce26c !important;
  color: white !important;
}
.syntaxhighlighter.printing .line .content {
  border: none !important;
}
.syntaxhighlighter.collapsed {
  overflow: visible !important;
}
.syntaxhighlighter.collapsed .toolbar {
  color: blue !important;
  background: white !important;
  border: 1px solid #6ce26c !important;
}
.syntaxhighlighter.collapsed .toolbar a {
  color: blue !important;
}
.syntaxhighlighter.collapsed .toolbar a:hover {
  color: red !important;
}
.syntaxhighlighter .toolbar {
  color: white !important;
  background: #6ce26c !important;
  border: none !important;
}
.syntaxhighlighter .toolbar a {
  color: white !important;
}
.syntaxhighlighter .toolbar a:hover {
  color: black !important;
}
.syntaxhighlighter .plain, .syntaxhighlighter .plain a { /* 일반 글자 색상 (html 예:일반 텍스트) */
  color: black !important;
}
.syntaxhighlighter .comments, .syntaxhighlighter .comments a { /* 주석 처리 글자 색상 */
  color: #00be00 !important;
}
.syntaxhighlighter .string, .syntaxhighlighter .string a { /* '글자' 또는 "글자" 안의 색상 */
  color: #696969 !important;
}
.syntaxhighlighter .keyword { /* 키워드로 등록된 색상 (html 예:태그명) */
  color: #4b4bff !important;
}
.syntaxhighlighter .preprocessor { /* preprocessor 색상 (javascript 예:#region 또는  #endregion) */
  color: #994500 !important;
}
.syntaxhighlighter .variable { /* variable 색상 (php 예:$thisvalue) */
  color: #aa7700 !important;
}
.syntaxhighlighter .value { /* value 색상 (css 예:숫자 또는 색상코드#a0a0a0 또는 bold 같은 값)  */
  color: #ff00ff !important;
}
.syntaxhighlighter .functions { /* functions 색상 (php 예:substr 같은 funcs에 등록한 키워드 색상) */
  color: #ff1493 !important;
}
.syntaxhighlighter .constants { /* constants 색상(php 예:__FILE__ 같은 constants에 등록한 키워드 색상 */
  color: #4b4bff !important;
}
.syntaxhighlighter .script { /* script class 색상(이 class는 찾지 못해서 .keyword와 같은 색상으로 지정했어요) */
  color: #4b4bff !important;
  background-color: none !important;
}
.syntaxhighlighter .color1, .syntaxhighlighter .color1 a { /* color1 class 색상(html 예:태그의 attribute 색상- width, height, class 등등)  */
  color: #FF4800 !important;
}
.syntaxhighlighter .color2, .syntaxhighlighter .color2 a { /* color2 class 색상(html 예: 같은 ..) */
  color: #ff1493 !important;
}
.syntaxhighlighter .color3, .syntaxhighlighter .color3 a { /* color3 class 색상(css 예:!important 단어 색상) */
  color: red !important;
}

/* class의 font-weight: bold 는 모두 삭제 했습니다 */

이제 위 shThemeTomato.css 테마를 적용하려면 [TISTORY 관리 -> 꾸미기 -> HTML/CSS 편집 -> 파일업로드] 에 업로드를 하시고,

[TISTORY 관리 -> 꾸미기 -> HTML/CSS 편집 -> HTML] 에서 아래와 같이 테마 파일명을 변경하세요.

그럼 이제 아래처럼 버그 및 폰트 크기, 행 높이, 행 번호 폭, 폰트 색상이 적용됩니다.

궁금하신 사항이 있으면 댓글 남겨주세요~~ 성심성의껏 답변드릴게요~~

휴~~ 이제 겨우 세번째 글을 올렸네요~~

매일 포스트 1개씩 쓰기로 혼자 다짐했는데, 2년만에 바꾼 스마트폰 백업과 복구 및 설정때문에(그냥 만지작거린거죠..ㅠㅠ) 세번째 글이 좀 늦었네요..ㅠㅠ

블로그에 글을 남겨서라도 꼭 지킬 수 있도록 해야겠어요...

저 매일 포스트 1개씩 쓰도록 최선을 다하겠습니다~~~!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

댓글과 공감은 글을 올리는데 큰 힘이 됩니다. ^^

감사합니다!