스킨 업데이트


이전부터 Syntax Highlighting 에는 SyntaxHighligher를 사용해 왔으나, 이번에는 좀 더 커스텀을 많이 할 수 있는 Highligter.js로 갈아탔습니다. SH 보다 장점이라고 하면 더 광범위 하게 적용 되는 스타일이라고 보시면 됩니다. 게다가 테마도 많아서 굳이 새로 만들필요도 없더군요. 기존에 있던것 가져다가 약간 변형만 시켰습니다. 


Highlighter.js 지원 언어 목록


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;

}

}