그런데, 가로로 길이가 너무 긴 code의 경우 layout이 보기 안 좋게 나와서 한동안 고민하다가 다시 놔두고 있었다.
어제, 그 문제를 다시 건들여 보았는데, css에서 scroll bar를 만들어 주는 기능이 있었다.
그래서 prettify.css를 수정하여 해당 기능을 구현해 보았다.
/* Pretty printing styles. Used with prettify.js. */
.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
pre.prettyprint { padding: 2px; border: 1px solid #888;
/* display:block;*/
width:580px;
margin: 0;
overflow-x: auto; overflow-y: hidden;
/* white-space: pre-wrap;*/ /* css 3*/
/* white-space: -moz-pre-wrap;*/ /* Mozilla, since 1999 */
/* white-space: -pre-wrap;*/ /* Opera 4-6 */
/* white-space: -o-pre-wrap;*/ /* Opera 7 */
/* word-wrap: break-word;*/ /* Internet Explorer 5.5+ */
/* word-break: break-all;*/
background-color: #FAFCFE;
border-color: #8394B2;
clear:both;
}
/* prettylines */
.prettycontainer { margin: 0; padding: 0; border: 1px solid #000; background:#EEE; width:640px;}
.prettycontainer table { border-collapse: collapse; border: 0; }
.prettycontainer tr,
.prettycontainer td { margin: 0; padding: 0; vertical-align: top; line-height:180%;}
.prettycontainer pre { margin: 0; padding: 0; border: 0;}
.prettycontainer .prettylines { padding: 0 10px 0 2px; text-align: right; background:#AAA;}
@media print {
.str { color: #060; }
.kwd { color: #006; font-weight: bold; }
.com { color: #600; font-style: italic; }
.typ { color: #404; font-weight: bold; }
.lit { color: #044; }
.pun { color: #440; }
.pln { color: #000; }
.tag { color: #006; font-weight: bold; }
.atn { color: #404; }
.atv { color: #060; }
}
code {
font: 12px 'Malgun Gothic', 'Courier New', 'Monaco', 'AppleGothic', 'Sans-serif';
line-height:180%;
}17번째 줄과 19번째 줄이 폭을 고정 시키고 가로 scroll bar를 만들어 준다. 세로 scroll bar가 생기면 line number와 실제 source code가 어긋날 수 있으므로 세로는 꺼 버렸다.
IE의 경우 (7에서만 시험했지만), 세로 scroll bar를 꺼 놓더라도 세로 scroll bar 만큼 자리를 차지 한다. 그래서, 32번째 줄에 최외곽 div의 폭을 17번째 줄의 pre보다 훨씬 크게 잡아 두었다.
FF (3에서 시험)와 Chrome에서는 pre의 영역 밖에 scroll bar가 생겼는데, IE (7에서 시험)에서는 pre 영역 안에 생겨서 맨 아래 공백을 하나 추가시키도록 Textcube Syntax Highlighter plugin을 수정해야 했다.
물론, scroll bar가 생기지 않을 정도의 폭을 갖는다면 IE에서는 추가된 한 줄 때문에 모양이 안 예쁠 수 있다. 하지만, 나는 IE로 내 blog에 접속하지 않는다.
다음 code block은 scroll bar 시험용 block이다.
scroll bar가 생기는 경우
#include <stdio.h>
int main (int argc, char *argv[])
{
/* This program will be print "Hello World" to your standard console output. This source code using ansi c standard, so you can use this source to other platform to provide ansi c compiler. */
printf("Hello World.\n");
return 0;
}scroll bar가 안 생기는 경우
# rm -rf /
글
