[티스토리] 코드 블럭 CSS 꾸미기

# 티스토리 코드 블럭 꾸미기

지금 보이는 OSX 윈도우 스타일로 코드 블럭을 바꿔봅시다.

1. 플러그인 설정

티스토리 플러그인 항목으로 가서 코드 문법 강조를 활성화시켜 주세요. 추천 테마는 Atom One Dark입니다.

2. CSS 편집

아래 내용을 스킨 css의 적당한 곳에 붙여 넣기 합니다. 저는 Noto San KR이라는 웹폰트를 사용 중이라 이 폰트도 적용해 봤습니다.

/* code css */
.hljs {
    margin: 10px 0;
    font-family: "Noto Sans KR"; /* 자신이 사용하는 웹폰트를 쓰세요. 지우셔도 됩니다. */
    font-size: .83em;
    border-top: 26px solid #3d454e;
    border-radius: 5px 5px 0 0 !important;
    padding: 10px 10px 13px !important;
}

.hljs:hover {
    border-top: 26px solid #4e5863;
}

code:before {
    content: url(images/logo_code.png); /* logo_code.png 이미지가 필요합니다. */
    margin-top: -30px;
    position: absolute;	
}

code:after {
    content: 'Source Code';
    color: #5b6373;
    font-size: .95em;
    float: right;
}

3. 이미지 파일 올리기

logo_code.png는 아래 파일을 다운로드하여 파일 업로드로 올려주세요.

logo_code.png

0.00MB

4. 간단한 버전

:hover나 :after은 없어도 상관없습니다. 아래와 같이 심플하게 적용하셔도 됩니다.

/* code css */
.hljs {
    margin: 10px 0;
    border-top: 26px solid #3d454e;
    border-radius: 5px 5px 0 0 !important;
    padding: 10px 10px 13px !important;
}

code:before {
    content: url(images/logo_code.png); /* logo_code.png 이미지가 필요합니다. */
    margin-top: -30px;
    position: absolute;	
}