Crayon Syntax Highlighter 플러그인을 설치하고 기본값으로 사용해보면 아래위 margin 이 없어 애써 삽입한 코드가 답답해 보일 수 있습니다.
이 플러그인은 내부에 별도로 CSS 스타일을 변경하는 UI를 지원하지 않기 때문에 설치한 테마의 CSS 스타일을 변경해서 플러그인의 아래위 간격을 넓혀 줍니다.
다음 설명은 아바다(Avada) 테마를 기준으로 말씀드립니다. (테마의 종류는 상관이 없습니다.)
1
워드프레스 어드민에서 'Avada/외모 > Theme Option'을 클릭합니다. 'Custom CSS' 탭을 클릭합니다.
2
Textarea 영역에 다음 문장을 추가해서 원하는 플러그인의 스타일을 만듭니다. 아래 코드는 아래/위의 마진을 3px 주어서 높이를 넓어 보이게 하였습니다.
/* Crayon-Syntax-Highlighter Style */
.crayon-syntax .crayon-pre * {margin: 3px 0px;}
/*************************************************/
