이 블로그는 hugo 프레임워크를 사용하고 있고, 테마는 beautiful hugo를 사용하고 있다. 사실 이 블로그를 만들고 나서 디폴트 기능과 디자인 외에 덧붙일만한 기능들을 공부해가며 추가해왔다. 예를 들면 애드센스광고를 특정위치에 넣는다던가, 문단과 문단사이 간격 조정하기 위해 CSS 파일구조를 파악하고 수정하기도 했다.
코드영역에 스크롤바가 나오지 않는다면,
beautiful hugo 테마에서 고치고 싶은게 몇개 더 있었는데, 그 중 하나가 소스코드 부분에 가로스크롤이 생기지 않는 문제가 있었다. 예를 들면 아래와 같은 소스코드를 보여주려고 했는데, 수평 스크롤이 나오지 않아 소스를 끝까지 볼 수 없는 문제였다. (지금은 해결이 되서 스크롤바가 잘 나온다.)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
브라우저에서 개발자도구를 이용해서 원인을 찾았다. overflow: hidden; 로 지정되어 있었는데, hidden 으로 설정되면 컨테이너를 벗어나는 내용은 스크롤바가 생기지 않아 숨겨지게 된다.
/* path: /themes/beautifulhugo/static/css/codeblock.css */
.highlight td:first-child pre, .highlight pre {
border-top-left-radius: 4px;
border-top-right-radius: unset;
border-bottom-left-radius: 4px;
border-bottom-right-radius: unset;
overflow: hidden; /* 이것이 문제임. */
}
해결방법은 overflow 설정
아예 overflow 를 주석처리해도 되는데, y축만 hidden 으로 하는게 나을거 같아 overflow-y 로 변경했다. 그랬더니 수평 스크롤바가 생겨 코드를 끝까지 다 볼 수 있게 되었다. 그리고 수정할때 원래 theme 내에 있는 파일을 수정하는 게 아니라, 수정할 파일을 /static 폴더내로 하나 복사해서 그 파일을 수정하는게 좋다. 원본은 나두고, 내가 수정한 파일들만 모아 볼 수 있어 유지관리에 좋다.
/* path: /static/css/codeblock.css */
.highlight td:first-child pre, .highlight pre {
border-top-left-radius: 4px;
border-top-right-radius: unset;
border-bottom-left-radius: 4px;
border-bottom-right-radius: unset;
overflow-y: hidden; /* overflow --> overflow-y 로수정 */
}