티스토리 코드블럭 폰트 스타일 수정

 

다른 글

2020/09/05 - [블로그] - 티스토리 코드블럭 스타일 수정(여백, 줄간격 등)

 

 

 

서론

highlight.js로 코드블럭의 하이라이트를 이용하고 있었다.

 

[티스토리] 티스토리 코드블럭에 하이라이트 넣기(highlight.js)

 

그리고 이번에 스킨을 티스토리에서 제공하는 북클럽으로 바꿨는데, 잘 사용하던 코드블럭의 폰트 사이즈가 작아지는 문제가 생겼다. 코드블럭 스타일이 스킨에 따라 다르다는 것을 알게 되었고, 그렇다면 CSS로 수정이 가능할 것이라 생각하게 되었다. 그래서 CSS를 뒤적거렸다.

 

변경 전

 

변경 후

 

1. html에서 코드블럭 폰트 사이즈 수정

html에서는 코드블럭을 작성하면 <pre><code>...</code></pre>로 감싸서 하이라이트를 적용한다. 따라서 스킨의 html에서 <pre><code>...</code></pre> 영역에 스타일을 준다.

 

블로그 관리 → 스킨 편집 → html 편집 -> html에서 head부분에 아래 코드를 삽입한다.

만약 이미 html에 pre code와 관련된 내용이 정의되어 있으면 font-size를 추가하거나 수정한다.

폰트 사이즈의 단위는 pt, px, em 등 다양하며 이 중 상대 단위인 em이 해상도가 바뀌어도 자동적으로 크기를 조절하므로 편하다. 기본값은 1.0em이며 0.5em은 50%, 2em은 200%다.

<style>
    pre > code {
    font-size: 1.0em;
    }
</style>

 

 

2. CSS에서 코드블럭 폰트 사이즈 수정

CSS 역시 pre code 부분을 수정한다.

 

블로그 관리 → 스킨 편집 → html 편집 -> CSS로 들어가서 pre code를 찾는다.

...

div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure {
	margin: 0;
	padding: 0;
}

...

위 코드는 북클럽 스킨의 CSS다. 스킨마다 각각 다르게 작성되었겠지만 pre code 영역을 수정해야 하는 것은 동일하다.

 

북클럽 스킨에서는 pre code가 h1, h2 등 다른것들과 함께 묶여있기 때문에 먼저 분리해준다.

div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure {
	margin: 0;
	padding: 0;
}

pre, code {

}

 

그리고 pre code 영역에 필요한 내용을 채운다.

font-family의 font는 먼저 쓰여진것이 우선순위를 갖는다. 아래 코드에서 사용자의 컴퓨터에 Consolas 폰트가 설치되어 있으면 이 폰트가 적용되고 없다면 Sans Mono, 이것도 없다면 courier이 적용된다.

pre, code {
	font-family: "Consolas", "Sans Mono", "Courier", monospace;
	font-size: 1.0em;
}

 

 

---

지금 보신 글에 의견을 남겨주세요.

이 글을 읽을 또 다른 분께 많은 도움이 될거에요.