[티스토리] css 수정해서 코드 블락 만들기

SyntaxHighlighter를 사용한 미려한 소스코드를 구현하는 법은 타 블로그에도 많이 나와있지만 개별적인 코드 블락에 대해서는 찾아보기가 힘듭니다.

저도 헤매고 있다가 우연히 한 마크다운 css에서 적용법을 알게 되어 공유하고자 합니다.

앞서 설명드리자면 본문에서의 코드박스란 위 사진의 '방문기록 및 웹 사이트 데이터 지우기'라고 써있는 부분의 테두리 박스를 말합니다.

#. CSS 수정

.md-fences,
code,
tt {
    border: 1px solid #ddd;
    background-color: #f8f8f8;
    border-radius: 3px;
    padding: 0;
    font-family: Consolas, "Liberation Mono", Courier, monospace;
    padding: 2px 4px 0px 4px;
    font-size: 0.9em;
}
.md-fences {
    margin-bottom: 15px;
    margin-top: 15px;
    padding: 0.2em 1em;
    padding-top: 8px;
    padding-bottom: 6px;
}

[티스토리 관리-HTML/CSS 수정]에서 CSS에 위 소스를 추가하시면 됩니다.

#. 적용

<p><code>이렇게 하시면 됩니다</code></p>

그 후 체크박스를 해제하시면 이렇게 하시면 됩니다 와 같이 원하던 코드 박스를 구현할 수 있습니다.