모바일에서 티스토리 코드블럭 가독성 높이기

이미지 출처 : Pixabay

이 블로그에는 티스토리 기본 스킨 중 하나인 Poster 스킨이 적용되어 있으며, 코드블럭의 하이라이팅을 위해 코드 문법 강조 플러그인(Syntex highlight)을 사용하고 있습니다.

지난번에 작성한 글 [DS] 스택 - Stack (개념 및 배열로 스택 구현하기)의 코드를 모바일에서 리뷰하다가 코드가 자동으로 줄이 바뀌어 있는 것을 확인하였고, 다른 티스토리 블로그에서도 코드블럭 내의 소스코드가 자동으로 줄바뀜되어 가독성이 떨어지는 것을 확인할 수 있었습니다.

처참한 가독성

모바일에서 가장 큰 점유율을 가지는 크롬 브라우저와 사파리 브라우저 모두에서 가로 스크롤링을 지원하기 위하여 스킨의 css를 편집하였습니다.

.entry-content hr 부분과 .entry-content pre 부분을 수정합니다.

이렇게!

.entry-content hr 부분과 .entry-content pre code 부분을 다음과 같이 수정합니다.

.entry-content pre {
	word-break:break-all;
	white-space:pre-wrap;
	/* word-wrap:break-word; */
}
.entry-content pre code {
	padding: 20px;
	white-space: pre;
	overflow-x: auto;
	-webkit-overflow-scrolling:touch;
}

그러면 안드로이드와 아이폰 모두에서 코드블럭 좌우 스크롤링이 가능한 것을 확인할 수 있습니다.