CSS 편집

글을 쓰면서 Block에 Code를 선택해서 스크립트 명령어를 입력한다. 그런데, 정작 블로그 메인 화면에서는 구별이 잘 가지 않아서 예전에 배운 CSS를 편집해 보기로 하였다.

먼저 블로그 화면에서 보이는 것을 변경하기 위해서는 style.css의 다음 부분을 수정해 준다. 아래쪽의 comment-content code 을 동일하게 했고, background-color와 color 를 우선 추가해 주었다. 그리고 코드를 넣었을 때 줄바꿈이 잘 보이도록 추가로 word-break와 white-space를 추가하였다. 여러 방법을 시도해 보았으나 이 2개의 옵션을 사용하는 것이 가장 만족스러웠다.

.entry-content code {
	font-family: Consolas, Monaco, Lucida Console, monospace;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 2;
	color: #66ff66;
	background-color: #282828;
	word-break: break-all;
	white-space: pre-wrap;
}

다음으로 글 작성하는 화면에서도 변경하기 위해서는 editor-style.css를 수정해 준다. 여기서도 background-color 부분만 추가해 주었다.

code,
kbd,
samp,
var {
	font-family: Consolas, Monaco, Lucida Console, monospace;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 2;
	color: #66ff66;
	background-color: #282828;
}

이렇게 하면 변경된 화면을 계속 볼 수 있다. 만일 이래도 적용이 안되는 것이라면, 브라우져 캐시를 삭제하면 된다.