티스토리 뷰

IT/블로그,티스토리

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

토마토.. 2016. 3. 11. 13:25

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


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


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

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


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


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


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
/**
 * 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)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
/**
 * 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
<link href="./images/shCore.css" rel="stylesheet" type="text/css">
<link href="./images/shThemeTomato.css" rel="stylesheet" type="text/css"> <!-- 여기 테마 파일명을 변경하세요 -->

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


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


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


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


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


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


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


감사합니다!


저작자표시 비영리 변경금지

'IT > 블로그,티스토리' 카테고리의 다른 글

카테고리의 다른 글 목록에 이전, 다음 버튼(페이징) 만들기  (2) 2016.04.23
유튜브 동영상 반응형 웹에 삽입하는 방법  (13) 2016.04.18
티스토리 블로그 모든 본문 중간에 글 수정없이 구글 애드센스 반응형 링크 광고 달기  (51) 2016.04.03
티스토리 최신글(최근에 올라온 글) 본문에 추가하기  (29) 2016.04.02
티스토리 반응형 스킨에 PC버전 보기, 모바일버전 보기 버튼 만들기  (4) 2016.03.24
티스토리 블로그에 탑(Top) 버튼 넣는 방법  (15) 2016.03.23
티스토리 반응형 스킨에 구글 애드센스(google adsense) 반응형 배너 적용 방법  (50) 2016.03.21
티스토리(Tistory) 블로그 원본 사진 이미지 보기  (11) 2016.03.14
티스토리(Tistory) 블로그에 코드 소스 하이라이트 SyntaxHighlighter 설정 및 활용, 버그 수정  (21) 2016.03.08
티스토리의 새 반응형 웹스킨 '#1' 카테고리 스크롤바와 글갯수 보이기  (29) 2016.03.07
공유하기 링크
댓글