Apply syntax highlighter at WordPress

syntax highlighter 를 적용하기 위해 'Code Prettify' 라는 플러그인을 설치하였다.

설치 후 가독성을 위해 기존 코드블럭의 배경을 dark 색으로 했던걸 연한 gray 색으로 변경하였다.

변경 이유는 'Code Prettify' 플러그인이 Dark 배경에 대해 지원을 하지 않아 플러그인을 적용하면 글자가 어두워서 잘 보이지 않기 때문이다.

- wordpress 관리자 모드

외모 - 사용자 정의하기(사용중인 테마의)

- CSS 수정

->추가 CSS

- 아래는 변경한 코드 내용임

pre.wp-block-code {
    border-left: 6px solid #0FBE7C;
    font-size: .8em;
    color: #ffffff;
    background-color: #F3F3F3;
    padding: 8px;
}

pre {
    border-left: 6px solid #0FBE7C;
    height: auto;
    overflow: auto;
    word-break: normal !important;
    word-wrap: normal !important;
    white-space: pre !important;
    font-size: .8em;
    color: #ffffff;
    background-color: #F3F3F3;
    padding: 8px;
}

-> 기존  #262626에서 #F3F3F3으로 변경

• pre.wp-block-code은 과거에 사용했던 'crayon syntax highlighter'에 의해 만들어진 코드블럭을 정의함
• pre 부분은 pre html 코드에 의해 만들어진 코드블럭을 정의함