코드 블럭 줄 바꿈, 모바일에서는 비허용으로

이번 것은 정말 너무나 간단하다. 하품이 나올지도 모른다. Chirpy 테마는 아주 감사하게도 반응형으로 제작된 테마다. 너비 길이에 따라서 각기 다른 스타일을 적용해 두었다. 이걸 응용하도록 하자.

반응형 구조 설정 찾기

반응형 구조는 어디서 만들어졌을까? 그것은 _sass/addon/commons.scss 다. 정말 웬만한 것은 여기 다 있는 것 같다. 필자는 해당 파일을 자주 바꿔놨기 때문에 독자분들과 코드의 줄 번호가 다를 수 있다. 그렇기 때문에 찾아야 하는 부분을 알려드리도록 하겠다.

@media all and (max-width: 576px)

위 부분을 찾으면 된다. 이쪽은 너비 길이가 576px 미만일 경우 아래의 스타일들을 적용하게 만들어두었다. 우리는 여기서 main {} 부분 아래에 아래 코드를 추가하도록 하자.

  .highlight table pre {
    white-space: pre !important; /* 코드 블락의 줄바꿈 비허용 */
  }

해당 클래스는 syntax-dark.scss와 syntax-light.scss에서 줄 바꿈을 허용하기 위해 추가했던 부분이다. 여기서 줄 바꿈에 대한 것만 pre-wrap에서 pre로 바꿔주는 것이다. !important를 통해 이것이 최우선으로 적용되게 만들면 된다. 그러면 이제 모바일에서도 즐거운 게시글을 만날 수 있다!