티스토리 마크다운 코드 블락으로 보이는 스타일 적용

마크다운모드가 추가되고 마크다운으로 작성하는 것이 간편해져서 에디터에는 만족하지만

테마에서는 원하는대로 보이지 않는 경우가 있을 것이다.

예를들어 코드 블럭인 ```혹은 `를 사용하여 특정부분을 표기할 때

ex) `function()`

위의 예시를 사용했을 경우 HTML상으로는 `는 <code>태그 안에 담긴 형태로 작성되는데,

(```의 경우는 <pre>)

CSS에서 이 부분을 적당히 손봐줄 필요가 있다.

필자는 참고로 아래와 같은 스킨을 사용 중이다.

필자의 경우 아래와 같은 방식으로 CSS에 추가를 해주었다.

블로그 관리화면 - 꾸미기 - 스킨편집 - CSS 메뉴로 들어간다.

/* code 블럭 처리 */
.skin_view .area_view code { border: 1px solid #eee; background-color: #fafafa; color: #111;
border-radius: 3px; padding: 5px; margin: 3px 0; font: 14px 'verdana'; display: inline-block; }

이 부분을 넣어주면 대략 아래와 같은 화면을 볼 수 있을 것이다.

* ```를 사용하는 경우 <pre><code>{code block}</code></pre> 형태가 되기 때문에

pre 밑에 code를 선택하는 후손 선택자를 재정의 해줄 필요가 있다.

아마도 사용하고 있는 테마의 css에서 pre부분을 정의하고 있을 것이므로 아래와 같이 지정해주면 코드블럭 안에 코드블럭이 중복되게 보이는 경우를 막을 수 있다.

.skin_view .area_view pre code { background-color:transparent; border:0; margin:0; padding:0;
outline:none; border-radius:0; font-family: Menlo,Consolas,Monaco,monospace; font-size:14px;}

두 경우 모두 예시이므로 적절히 조절하면서 사용하면 좋을 것.

이상 끝.