나는 티스토리에 포스트를 작성하기 전, Typora 에디터를 통해 마크다운으로 작성하고, 티스토리에서 지원하는 마크다운 에디터에 붙여 넣는다.
마크다운으로 작성하면 마우스가 없어도 표, 코드 등의 대부분이 작업이 가능하기에 자주 쓰고 있다.
그런데, 티스토리에 옮기고만 나면 Typora에선 괜찮게 보이던 미리보기가 망가져버린다.
약간 변형되는 글꼴, 줄 간격 틀어짐과 같은 부분은 제출하기 전에 수정하고 있지만, 최근 들어 코드 블럭이 은근 말썽이었다. 티스토리에서 제공하는 코드 하이라이트 플러그인을 사용하고 있는데 아직 UI상에서의 크기 수정은 지원되지 않는다.
아래 화면처럼 일반 글자는 적당한 크기로 보이지만, 코드 블럭 내의 코드들은 침침하기에 짝이 없다고 할 수 있겠다.
더군다나 나의 블로그의 경우엔 평일 업무 시간대에 대부분이 유입이 발생하는데 대부분이 PC로의 유입이다. (PC에선 더 안보였다)
소스코드를 봐야 하는데 이들의 내용이 잘 보이지 않는다는 건 심각한 문제이기에 새로운 글들을 쓰기에 앞서 일단 이 문제를 고치기로 했다.
티스토리는 HTML 편집을 허용하기에 관리 페이지 > 꾸미기 > 스킨편집 을 들어가 아래와 같이 head 태그 내에 style태그를 추가해주었다.
<head>
<!-- ~~ 기존 내용들 ~~~-->
<!-- 아래부터 추가 -->
<style>
pre > code {
font-size: 1.3em;
}
</style>
<!-- 여기까지 -->
</head
폰트 사이즈의 기본 값이 1em이니 원하는 크기로 설정하면 된다.
나는 1.3em으로 수정하였고 아래와 같이 코드 블럭의 폰트가 보기 편한 크기로 변경되었다
댓글