Resizing font size of SyntaxHighlighter evolved

Crayon Syntax Highlighter를 사용하다가 Syntax Highlighter를 갈아타게 되었다.

해당 플러그인이 지원이 중단된지 오래되었고 PHP 7.x 버전에 대응하지 못해서 변경하였다.

기존에 작성한 post의 Crayon Syntax Highlighter 기반의 코드는 Preformatted에 의해 유지가 되지만 기본 포맷만 유지가 된다.

Crayon Syntax Highlighter으로 변경해서 글을 작성해 보니 기본적 폰트사이즈가 본문과 동일하여 너무 크게 느껴졌다.

그래서 아래와 같이 css 코드의 textarea 부분의 font 크기를 조정함으로서 알맞게 resizing을 하였다.

 

shCore.css 수정

• AS-IS :
  line-height: 1.1em !important;
  font-size: 1em !important;
• TO-BE :
  line-height: 1.5em !important;
  font-size: 12px !important;

css 코드

# vim wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.css
.syntaxhighlighter textarea {
  -moz-border-radius: 0 0 0 0 !important;
  -webkit-border-radius: 0 0 0 0 !important;
  background: none !important;
  border: 0 !important;
  bottom: auto !important;
  float: none !important;
  height: auto !important;
  left: auto !important;
  line-height: 1.5em !important;
  margin: 0 !important;
  outline: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  position: static !important;
  right: auto !important;
  text-align: left !important;
  top: auto !important;
  vertical-align: baseline !important;
  width: auto !important;
  box-sizing: content-box !important;
  font-family: Monaco, "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 12px !important;
  /*min-height: inherit !important; */
  /*min-height: auto !important;*/
  direction: ltr !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  -ms-box-shadow: none !important;
  -o-box-shadow: none !important;
  box-shadow: none !important;
}

처음에 .97em 으로 수정했으나 라인 넘버와 코드의 라인의 컬럼의 수평이 일치하지 않아 12px 로 변경함
라인의 간격이 너무 좁아 1.1em -> 1.5em 으로 변경

[ 참고 사이트 ]

• Changing the font size, line height and code box padding of Syntaxhighlighter Evolved plugin

Changing the font size, line height and code box padding of Syntaxhighlighter Evolved plugin

/* change SyntaxHighlighter plugins styles */
    /* font-size */
    .syntaxhighlighter a,
    .syntaxhighlighter div,
    .syntaxhighlighter code,
    .syntaxhighlighter table,
    .syntaxhighlighter table td,
    .syntaxhighlighter table tr,
    .syntaxhighlighter table tbody,
    .syntaxhighlighter table thead,
    .syntaxhighlighter table caption,
    .syntaxhighlighter textarea {
        font-size: 14px !important;
    }
    /* top and bottom padding in code box */
    .syntaxhighlighter {
        padding: 1em 0 !important;
    }
    /* increaes line number and code line height */
    .syntaxhighlighter table td.gutter .line {
        padding: 3px 0.5em 3px 1em !important;
    }
    .syntaxhighlighter table td.code .line {
        padding: 3px 1em !important;
    }

.syntaxhighlighter textarea 부분만 수정해줘도 제대로 동작한다.