티스토리 코드블럭 테마 편집하기 - html, css, 크롬을 이용하자!

안녕하세요.

 

지난 번에 이어 코드블럭의 출력 모양을 좀 더 다듬어 보려고 해요.

 

이번 포스팅에서는 티스토리의 html, css 편집 탭을 이용해야 합니다 :D

 

지난 번 포스팅은 아래 링크를 참조하세요!

티스토리에 코드블럭과 하이라이트 기능을 이용하여 코드 입력하기!

 

자, 그럼 시작해볼까요?

 

우선, 크롬을 이용해서 테스트 포스팅을 만들고 코드블럭에 해당하는 코드 위치를 확인해보니 <pre id=.. 부분이 외부 블럭인 것 같네요.

<code class="hljs">... 부분은 내부 테마인 것 같아요.

그래서 블로그 설정에서 편집 툴로 돌아가서 css 내에서 pre를 검색해서 찾았습니다!

확인을 위해 padding 값을 먼저 1px로 바꿔볼까요?

코드블럭과 외부 테두리 박스 사이의 좌우 간격이 좁아진 것 같네요?

padding은 원래대로 돌려두고, border와 solid를 지우니까 좀 더 예뻐진 것 같습니다.

pre { padding: 10px; margin: 5px 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; border: 1px solid #ddd; font: 12px/180% 'Lucida Console'; background-color: #fafafa; border-radius: 3px; }

위 코드는 수정 전 코드에요 :)

 

원래는 이것 저것 더 만져보면서 수정하려고 했는데, 생각보다 깔끔해보여서 여기까지하고 마무리했습니다.

 

html이나 css를 잘 모르시더라도 크롬에서 편집자 도구를 이용하시면 생각보다 쉽게 코드의 위치를 확인하실 수 있어요.

 

이를 활용하는 법에 대해서는 나중에 html, css 포스팅에서 추가로 다룰게요 :)

 

그럼 방문하신 모든 분들 좋은 하루 되세요!