SyntaxHighlighter | 문제 해결 | 세로 스크롤 바가 항상 표시되었을 때 해결 방법

SyntaxHighlighter를 사용하여 소스 코드를 표시되었을 때, 세로 스크롤 바가 항상 표시되는 문제의 해결 방법에 대해 설명한다.

세로 스크롤바가 항상 표시되었을 때 해결 방법

사용하고 있는 브라우저에서 표시되는 방법은 다르지만 소스 코드를 표시할 때 항상 세로 스크롤 막대가 표시될 수 있다.

세로 스크롤 바를 숨기 위해서는 현재 사용중인 “shCore.css” 파일 또는 “shCoreXXX .css” 파일을 텍스트 편집기로 열어, 다음과 같은 내용이 있는 곳을 찾는다.

syntaxhighlighter {
  width: 100% !important;
  margin: 1em 0 1em 0 !important;
  position: relative !important;
  overflow: auto !important;
  font-size: 1em !important;
}

아무래도 라이브러리 파일 자체를 변경하는 것은 문제가 될 수 있으니, CSS를 아래와 같이 따로 작성하여 속성을 추가하도록 한다.

<style>
  .syntaxhighlighter {
    overflow-y : hidden! important;
  }
</style>

코드 실행

설정은 이것으로 되었다. 속성을 추가 후에 어떻게 표시되는지 확인해 보면 세로 스크롤 바가 표시되지 않는 것이다.

Firefox는 원래 표시되지 않았고, Chrome 및 IE11에서도 표시되지 않는 것을 확인하였다.