이전부터 Syntax Highlighting 에는 SyntaxHighligher를 사용해 왔으나, 이번에는 좀 더 커스텀을 많이 할 수 있는 Highligter.js로 갈아탔습니다. SH 보다 장점이라고 하면 더 광범위 하게 적용 되는 스타일이라고 보시면 됩니다. 게다가 테마도 많아서 굳이 새로 만들필요도 없더군요. 기존에 있던것 가져다가 약간 변형만 시켰습니다.
SH는 브러시라는 개념으로 자신이 쓸 언어의 갯수만큼 스크립트 파일을 추가해줘야 하나, Highlight.js는 자체적으로 선택해서 단일 파일을 생성할 수 있는 점이 참 마음에 듭니다. 저 같은 경우 제가 현재 쓰고 있는 CSS,HTTP,Javascript,Ruby,CoffeeScript,PHP,Markdown,HTML/XML,Python,Haml,SCSS을 선택하였습니다.
무엇보다도 SH보다 좋은 점은 정말 코드뷰만 꾸며주는 것이라 잡다한 기능이 없어 로딩이 상당히 빠르다는 것입니다. 보통 Pre 태그로 작성을 하나, 티스토리 에디터에서 Pre 태그를 쓰면 열이 다 밀리기 떄문에 Blockquote 코드를 활용했습니다. 그리고 기존 Blockquote와 충돌이 없도록 alt attribute를 이용해서 스타일이 적용되도록 해놓았고요.
아래는 간단한 코드 예시 입니다.
div.tt-gallery-box {
text-align: center !important;
width: 125% !important;
height: auto;
background: black;
right: 0;
margin-left: -12.5%;
margin-right: auto;
max-width: 125%;
position: relative;
&:hover {
div.galleryControl {
display: block;
}
}
div.galleryControl {
font-family: Raleway, sans-serif !important;
position: absolute;
width: 100%;
background: rgba(0,0,0,.5);
height: 20%;
overflow: auto;
margin: auto !important;
top: 0;
left: 0;
bottom: 0;
right: 0;
font-size: 55px !important;
color: white;
font-weight: 100 !important;
display: none;
a {
width: 100px;
height: 100px;
display: block;
&:first-child {
float: left;
left: 0;
position: absolute;
background: url(left.png);
}
&:nth-child(2) {
margin: auto;
background: url(zoom.png);
}
&:last-child {
float: right;
margin-top: -100px;
background: url(right.png);
}
&:hover {
@include box-shadow (0 0 1px 2px $lime-green);
}
img {
display: none;
}
}
}
img {
width: 100%;
}
div.galleryCaption {
display: none;
}
}
