[티스토리] 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에 위 소스를 추가하시면 됩니다.

 

#. 적용

티스토리 글쓰기 창에서 HTML를 체크해주시고 문장 앞에 <p><code>를 넣고, 문장 뒤에 </code></p>를 넣으시면 됩니다.

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

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