티스토리 뷰
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개씩 쓰도록 최선을 다하겠습니다~~~!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
댓글과 공감은 글을 올리는데 큰 힘이 됩니다. ^^
감사합니다!
'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 |
- Total
- Today
- Yesterday
- 티스토리
- 타이어 광택제
- 블로그
- 타이어 광택제 비교
- 해운대
- 퓨리스 A34
- 포스타 upp
- TDG 블루베리 휠클리너
- 디테일링
- 셀프세차
- 티스토리 반응형 스킨 #1
- 퓨리스 타이어 광택제
- 자동차 디테일링
- 티스토리 반응형 스킨
- 퓨리스 A34 왁스
- 타이어 드레싱
- 데피니티브 율리시스
- 세차
- 티스토리 스킨
- 티스토리 새 반응형 웹스킨 #1
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |