오디세이 스킨 코드블럭(Syntax Highlight) CSS 분석

오디세이 스킨에서 html 이나 CSS 코드를 블로그에 올릴 때가 많습니다. 가독성이 좋기 위해 코드블럭 플러그인을 사용중인데 코드블럭 관련 CSS를 알아봅니다. 

 

코드블럭, code, pre

 

티스토리 코드블럭 테마 7가지

티스토리에서는 플러그인을 통해 7가지 테마를 제공하고 있는데 그 테마 예시와 플러그인을 적용하는 방법에 대해 먼저 보시고 CSS 분석을 보시는 게 좋습니다. 내 블로그 스킨이나 디자인에 어울리는, 혹은 내가 좋아하는 스타일의 코드 하이라이트여야 하니까요. 

티스토리 코드블럭 Syntax Highlight 테마 예시보기

 

코드블럭 <code>

스킨편집 > CSS 에서 code 를 검색하면 딱 1개의 코드가 검색됩니다. 아래 부분이 코드블럭의 글꼴과 사이즈를 정하는 부분이지요. 

 

code,
kbd,
samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

▲보시는 것처럼 오디세이 스킨은 기본적으로 코드블럭은 monospace 로 되어있습니다. 만약 저처럼 별도로 설정한 웹폰트로 코드블럭 폰트를 변경하고 싶으시다면 font-family: 원하는 폰트를 입력하시면 됩니다. 

 

font-size: 1em; 은 블로그의 기본 글자 크기가 18px 이라면 1em=18px 입니다. 만약 기본 글자 크기보다 키우고 싶다면 1.2em, 1.5em 식으로 숫자를 키우면 되고, 코드블럭 글자 크기를 본문 글자 크기보다 줄이고 싶다면 0.9em, 075em 으로 숫자를 1보다 작게 설정하시면 됩니다.

 

참고로 2em 은 기본 글자 크기 2배라는 의미입니다. (보통 본문2의 글자크기가 됩니다. 블로그 본문 내용을 쓸 때 자동세팅되는 글자크기이지요.)

 

그런데 원래 티스토리 플로그인으로 제공하는 코드블럭을 자세히 보시면 바깥에 옅은 회색 테두리가 있고 검정에 가까운 배경색상이 있는 것을 볼 수 있습니다. 이런 부분은 어디에서 설정되는걸까요?

 

코드블럭 <pre> (1)

CSS 에서 pre 라고 검색을 하면 아래 코드가 나옵니다. <pre>와 <code> 는 html 태그인데 주로 텍스트를 보여주는데 사용합니다. <pre> 태그는 preformatted text 로 미리 포맷된, 미리 정의된 서식이 걸어져있는 태그를 뜻합니다. 

 

.article-view pre {
    padding: 20px;
    background: rgba(0, 0, 0, 0.05);
    font-size: 16px;
    color: rgba(34, 85, 51, 0.87);
    white-space: pre-wrap;
}

▲즉, 오디세이스킨 CSS 에 들어있는 위 pre 코드 내용대로 코드블록이 보여진다는 의미이지요. pre태그는 대부분 브라우저와 모바일 운영체제에서 호환이 되기 때문에 pre 태그를 사용하면 html 이나 CSS 코드를 더 가독성있게 만들 수 있습니다. <pre> 태그 부분은 pre 태그가 걸려있는 텍스트, 즉 코드블럭이 웹상에서 어떻게 보여지는지를 결정합니다.

 

코드블럭 <pre> (2)

아래 코드는 오디세이스킨 최초 세팅된 코드에 코드문법강조 플러그인(dracula)를 적용한 모습니다. 

오디세이스킨 기본세팅+코드문법강조 플러그인 Dracula 적용

1) padding

padding 은 쉽게 말해서 안쪽 여백을 뜻합니다. 전체 회색 테두리 안쪽 여백을 얼마나 주고 코드가 있는 검정 바탕이 위치할 것인가를 결정합니다. 코드블록 디자인에 맞추어 쉽게 말하면, 회색 테두리 굵기가 됩니다. 

 

회색테두리를 없애고 싶으시다면 padding을 0으로 두시면 됩니다. 회색 테두리를 더 굻게 하고 싶으시다면 숫자를 올리면 됩니다. 

 

2) background: rgba

사실 회색부분은 테두리가 아닙니다. ㅎㅎ 회색 배경이지요. 그 배경속에 코드블럭이 들어가있는 셈입니다. 색상을 표기하는 방법은 다양합니다. 티스토리 오디세이스킨에서는 이 부분의 색상을 rgba 로 설정했네요. 

 

 

rgba=red, green, blue, alpha 를 뜻하는데 이때 a(alpha)는 투명도를 뜻하고 텍스트에는 영향을 미치지 않습니다. 즉, 배경에만 영향을 주는 투명도 코드입니다. 그러니 a=0 이면 흰색, a=1 이면 검정이 됩니다. 

 

3) white-space

white-space 는 줄바꿈과 관련된 속성입니다. pre-wrap 은 자동으로 줄바꿈이 되는 속성입니다. 

참고로 pre는 연속공백을 보여주면서 자동 줄바꿈을 하지 않고 한 줄에 자동으로 스크롤바를 형성해서 다 보여줍니다. 

nowrap 은 연속공백 없이 자동 줄바꿈을 하지 않지요. 

CSS| white-space, overflow 속성 예시

 

마무리

티스토리 블로그를 운영하다보면, 블로그 디자인을 바꾸기 위해서 CSS를 건드리는 일이 많습니다. 그 내용을 저같은 아마추어는 일일히 기억하기가 어렵지요. 그래서 많은 분들이 기록용으로, 공유용으로 CSS 코드나 HTML 코드를 공유하실텐데 이제 코드블럭 디자인도 편하게 변경하실 수 있으면 좋겠습니다. 

오디세이 스킨 글제목 배경, 글제목과 CSS 용어 설명

 

오디세이 스킨 블로그 이름 CSS 분석