티스토리 코드블럭 바꾸기

Codeblock Thema 세팅

highlight.js같은 다른 방법도 존재하지만, 기본 테마로도 충분한 것 같아 티스토리에서 제공해주는 플러그인을 사용했다. 

블로그 관리  → 플러그인  → 코드 문법 강조 사용

 

종류는 아래와 같다.

기본

Atom One Dark

Atom One Light

Github

Monokai

Darcula

Visual Studio

Xcode

언제든지 쉽게 변경할 수 있으니, 저장해놓고 질릴 때마다 끌리는 걸로 바꾸면 될 것 같다.

 

Small Block CSS 수정

그런데 이렇게 하고 보니 이 상자 가 에디터에서는 잘 나오는데, 글을 저장했을 때는 제대로 표현이 안 되는 문제가 있다.
나는 딱 에디터에 나오는 것처럼 표시하고 싶은데..
이 부분은 따로 css를 편집해야 한다고 해서, 방법을 찾아 수정해줬다.

블로그 관리 → 스킨 편집 → html 편집 → CSS 로 이동해서, 아래 코드를 아무 곳에나 Ctrl-C, V 해준다.

p > code {
    border: 1px solid #ddd;
    background-color: #f8f8f8;
    border-radius: 3px;
    padding: 4px 4px 2px 4px;
}

 

적용 후 새로고침하면 잘 적용된 것을 확인할 수 있다.